Angular CLI ng常用指令整理

一、组件创建

ng generate component heroes

二、运行项目

ng serve --open //--open 立即打开

三、创建指令

ng g directive my-new-directive

四、创建管道

ng g pipe my-new-pipe

五、ngModel指令

1、虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。

它属于一个可选模块 FormsModule，必须自行添加此模块才能使用该指令。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

import { AppComponent } from './app.component';

import { HeroesComponent } from './heroes/heroes.component';

@NgModule({

  declarations: [

    AppComponent,

    HeroesComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

2、用法

<div>

    <label>name:</label>

    <input type="text" placeholder="name" [(ngModel)]="hero.name"/>

  </div>

六、ngFor指令

*ngFor 是一个 Angular 的复写器（repeater）指令。它会为列表中的每项数据复写它的宿主元素。

不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。

用法：

<ul>

    <li *ngFor="let hero of heroes">

        <span class="badge">{{hero.id}}</span> {{hero.name}}

    </li>

</ul>

七、click事件绑定

语法：

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

八、ngIf指令

语法：

 <div *ngIf="selectedHero">

      <h2>{{selectedHero.name | uppercase}} Details</h2>

 </div>

九、ngStyle的基本用法

<p [ngStyle]="{'color': 'green'}">hello world!</p>

<p [ngStyle]="{'color':num == 2 ? 'red' : 'green'}">今天天气真好！！！</p>

十、ngClass的基本用法

第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类,基本用法:

<p [ngClass]="{'text-success': true}">被风吹过的夏天</p>

<p [ngClass]="{'text-success': username == 'zxc'}">西界</p>

<p [ngClass]="{'text-success': index  == 0}">黑键</p>

栗子：

<ul>

    <li *ngFor="let item of arr, let i = index">

        <span [ngClass]="{'text-danger': i==0}">{{item}}</span> //循环显示的第一行添加text-danger样式，文字变红色

    </li>

</ul>

十一、ngSwitch的基本用法

<div [ngSwitch]="num">

      <div *ngSwitchCase="">显示</div>

      <div *ngSwitchDefault>默认显示</div>

</div>

巴特西