1 基本用法

新建组件

ng g component components/header
//生成四个文件,这种方式会自动注册组件

tips:所有的组件必须要在app.modules中注册，但是账上面这种方法已经自动生成了，就不用注册了

@NgModule({
  /* 注册组件 */
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

插件

Angular Snippets (Version 8)

指令 for循环 ngFor if判断 ngIf

<div *ngFor="let item of arr">{{item.name}}</div>
<div *ngIf="isShow">哈罗</div>

属性绑定

<img [src]="imageUrl" alt="">

事件

1 点击事件（click）要加括号

<p (click)="handleClick()">{{msg}}</p>
//ts
export class HeaderComponent implements OnInit {
 ...
  public msg:string="I like write code"
  constructor() { }
  ngOnInit() {
  }
  handleClick(){
    this.msg="change"
  }
}

用户输入事件

//获取键盘码

<input type="text" (keyup)="handleEnter($event)">
  //ts
  handleEnter(event:any){
    console.log(event.keyCode)
  }

//获取input输入值

<input #box type="text" (keyup.enter)="handleEnter(box.value)">
//ts
handleEnter(value:string){
    console.log(value)
  }