angular 学习

环境搭建

//全局安装
npm install -g @angular/cli   
//创建项目
ng new my-app
//启动项目
ng serve --open
//启动其他端口
ng serve --port  8888

快速创建

ng generate component 组件名 简写 ng g c 组件名
ng g directive 指令名称 会自动引入 ng g d 指令名称
ng g s path/名称 创建http服务文件
含有多个路由时：
ng generate component 组件名 --module=main (main为多个模块时指定某一个路由模块)
ng g m 模块名 新建模块
ng g m 模块名 --routing 新建模块并且增加模块路由

生命周期

官网生命周期
ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()
其中:ngOnInit()、ngAfterContentInit()、ngAfterViewInit()和ngOnDestroy()在一个组件的生命周期中只会被调用一次

模板语法的五个常用特性

循环*ngFor
if判断*ngIf
插值表达式{{}}
属性绑定[]
事件绑定 ()

<ul>
  <li *ngFor="let hero of heros" (click)="getHero(hero)"> {{hero.name}}</li>
</ul>
<span>{{test}}</span>
<input type="text" [value]="hero?.name" class="inputA">
<button (click)="updateHero()">修改</button>

下面绑定效果完全相同

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

属性绑定bind-class \ bind-src 等价于[class] [src]

<p [ngClass]="{active:true,otherClass:true}">[ngClass]</p>
<p [class]="class1">[class]</p>
<p class="{{class1}}">class</p>
<p bind-class="class1">bind-class</p>
<img bind-src="imgUrl" alt="">
<img [src]="imgUrl" alt="">

样式绑定

有些样式绑定中的样式带有单位
[ngStyle] 或者[style.color]

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
<button [style.width.px]="!isSpecial ? 150 : 50" >Small</button>

currentStyles: object = {
    color: 'red',
    fontSize: '30px'
};
<div [ngStyle]="currentStyles">ngStyle</div>

循环*ngFor

index: number: The index of the current item in the iterable.
first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。
last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 true。
even: boolean：如果当前条目在可迭代对象中的索引号为偶数则为 true。
odd: boolean：如果当前条目在可迭代对象中的索引号为奇数则为 true。
trackBy返回 NgFor应该追踪的值提高渲染性能

trackByList(id: number, list) {
    return list.id;
}
<ul>
  <li *ngFor="let hero of heros;trackBy:trackByList" (click)="getHero(hero)"> {{hero.name}}</li>
</ul>

<ul>
   <li *ngFor="let hero of heros;index as i;first as first;odd as odd" (click)="getHero(hero)">
      {{i}} {{hero.name}}
   </li>
</ul>

双向绑定

[(ngModel)]
首先在app.module.ts中引入FormsModule

<input type="text" [(ngModel)]="test1">{{test1}}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule   //引入之后才能form表单操作
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  test1 = '123'
}

NgSwitch 指令

类似于 JavaScript 的 switch 语句

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

模板引用变量 ( #var )

使用井号 (#) 来声明引用变量。 #phone 的意思就是声明一个名叫 phone 的变量来引用 <input> 元素。

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

指令

ng g directive 指令名称 会自动引入

<span>失去焦点后自动截取前五位值</span><input type="text" appTest/>

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
  selector: '[appTest]'
})
export class TestDirective {
  constructor(public elementRef: ElementRef) {
  }
  @HostListener('blur', ['$event.target'])
  blurFn(evt) {
    if (evt.value) {
      if (evt.value.trim().length > 5) {
        this.elementRef.nativeElement.value = evt.value.substring(0, 5);
      }
    }
  }
}

模板表达式操作符

管道操作符 (|)
安全导航操作符 ( ?. ) 和空属性路径
非空断言操作符（!）

{{currentHero?.name}}
{{hero!.name}}

键盘事件、点击事件

<input #box  (keyup.enter)="update(box.value)"   (blur)="update(box.value)">
<input #box  (keyup)="keyup(box.value)" >
 <button (click)="addHero(newHero.value)">Add</button>