一、组件创建
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>
//方式1:定义数组 public arr=['1111','2222','33333']; //方式2: 推荐 public list:any[]=['我是第一个新闻',222222222222,'我是第三个新闻']; //方式3: public items:Array<string>=['我是第一个新闻','我是第二个新闻'];
七、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="1">显示</div> <div *ngSwitchDefault>默认显示</div> </div>