当前位置： 移动技术网 > IT编程>开发语言>JavaScript > angular cli + primeNG

angular cli + primeNG

2019年06月07日  | 移动技术网IT编程  | 我要评论

目录：

　　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

2、创建项目

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

　　

3、构建路由　　

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

　　

　　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 里面引入

 　　

　　调用app-header

　　

 

5、组件之间的通信　　

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

　　home -> header

　　

　　　　

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

　　

　　　接收完之后，就可以使用

　　　

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

 　　

　　

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

　　父组件接收，通过backmsg

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

　　

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';

　　

　　c、语法问题

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网