angular cli + primeNG

Contents :

　　1, the installation angular cli

　　2. Create a project

　　3, construction of the route

　　4, New Component

　　5 communication between the components

　　6, introduced primeNG

　　7, modify primeNG component styles

　　8, issue

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

1, the installation angular cli

　　Command --cnpm install -g @ angular / cli

　　After the installation is complete, you can view the version if the ok --ng Version

　　Official website address: https://angular.io/start/data see the syntax of these * ngIf * ngFor

2. Create a project

　　- ng init - in the current directory to create a new application
　　- ng new new - to create a new directory, then run ng init command in the new directory
　　- ng new web create web
　　began to run after the completion of the project created
　　- cd web
　　- ng serve
　　successful operation defaults to 4200, can be accessed on the website

3, construction of the route　　

　　web directory, Mr. Cheng Components
　　- cd web
　　ng gc Home - // shorthand ng generate component home
　　after created

　　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",
  //...
],

　　针对每个组件看官网文档, 官网： https://www.primefaces.org

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

angular cli + primeNG

Guess you like