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>