欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angular cli + primeNG

程序员文章站 2022-06-29 07:54:16
目录: 1、安装 angular cli 2、创建项目 3、构建路由 4、新建组件 5、组件之间的通信 6、引入primeNG 7、修改primeNG组件样式 8、问题 1、安装 angular cli 命令 --cnpm install -g @angular/cli 安装完成后可以查看版本是否o ......

目录

  1、安装  angular cli

  2、创建项目

  3、构建路由

  4、新建组件

  5、组件之间的通信

  6、引入primeng

  7、修改primeng组件样式

  8、问题

------------------------------------------------------------------------------------------

1、安装  angular cli

  命令 --cnpm install -g @angular/cli

  安装完成后可以查看版本是否ok --ng version

  官网地址:    查看语法这些 *ngif   *ngfor

angular cli + primeNG

2、创建项目

  -- ng init  - 在当前目录创建新的应用程序
  -- ng new - 创建新的目录,然后在新建的目录中运行 ng init 命令
  -- ng new web  创建web
  项目创建完成之后开始运行
  -- cd web
  -- ng serve
  运行成功默认为4200,网页上可以访问

  angular cli + primeNG

3、构建路由  

  web目录下,先生成components
  -- cd web
  -- ng g c home   //  简写    ng generate component home
  创建完成后

  angular cli + primeNG

  app.module.ts      web/src/app/app.module.ts

import { browsermodule } from '@angular/platform-browser';
import { ngmodule } from '@angular/core';

import { approutingmodule } from './app-routing.module';
import { appcomponent } from './app.component';
import { homecomponent } from './home/home.component';   引入

@ngmodule({
  declarations: [
    appcomponent, 
    homecomponent   //使用
  ],
  imports: [
    browsermodule,
    approutingmodule
  ],
  providers: [],
  bootstrap: [appcomponent]
})
export class appmodule { }

  在app-routing.module.ts 创建路由     web/src/app/app-routing.module.ts 

  

import { homecomponent } from './home/home.component';  引入

const routes: routes = [
  {path: '', pathmatch: 'full', redirectto:'home'},  // redirect
  {path: 'home', component:homecomponent}
];

  打开主页页面就会自动进入home页面

4、新建组件

  上面已经用到了,使用  -- ng generate component header  /  -- ng g c header 

  创建好的组件我移动到了components目录下

  里面的selector 就是调用的名称 <app-header></app-header> 这样调用

  在app.module.ts 里面引入

   angular cli + primeNG

  调用app-header

  angular cli + primeNG

 

5、组件之间的通信  

  父组件-> 子组件   通过@input

  home -> header

  angular cli + primeNG

    angular cli + primeNG

  上面我们顶一个title对象传递给header组件,接下来header组件要接收

  angular cli + primeNG

   接收完之后,就可以使用

  angular cli + primeNG 

  子组件-> 父组件 通过@output
  添加点击按钮

   angular cli + primeNG

  angular cli + primeNG

   子组件上面点击按钮出发checkedcallback时间,将id值存到checkedback里面传给父组件

  父组件接收,通过backmsg

  <app-header [title]='title' (backmsg)='checkbackmsg($event)'></app-header>

  angular cli + primeNG

6、引入primeng

  -- npm install primeng --save
  -- npm install primeicons --save
  -- npm install @angular/animations --save

   使用模块

import {browsermodule} from '@angular/platform-browser';
import {browseranimationsmodule} from '@angular/platform-browser/animations';

@ngmodule({
    imports: [
        browsermodule,
        browseranimationsmodule,
        //...
    ],
    //...
})
export class yourappmodule { }

  引入样式

  angular.json 修改styles  web/src/angular.json

  

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

  针对每个组件看官网文档, 官网: 

7、修改primeng组件样式 

   

/*修改.ui-panelmenu a的css*/
:host ::ng-deep .ui-panelmenu a{
    background:gray;
    color: white;
    font-size: 14px;
}

8、问题

  a、can't resolve '@angular/cdk/scrolling 

  -- npm install --save @angular/material
  -- npm install --save @angular/cdk

  b、ngmodel问题

  import { formsmodule } from '@angular/forms';

  angular cli + primeNG

  c、语法问题

   angular cli语法 改变 ng-if   ----> *ngif   ng-for  ---->  *ngfor