安装扩展

Angular Snippets (Version 8)
google 扩展
angury

一、如何新建一个组件

ng g component components/xxx 名字

1.项目结构

项目结构
app.module.ts //根模块
@NgModule({
  // 注册组件
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.组件插入

//app.component.html
<app-header></app-header>
<app-content></app-content>

二、渲染及属性绑定

public arr:object [] = [{name:"html",age:10},{name:"css",age:30}]
public isShow:boolean = true;
public imageUrl:string="http://5b0988e595225.cdn.sohucs.com/images/20180726/84bd17514858436d930736d0d73af0c7.jpeg"
public msg:string = "我喜欢写代码"

if for 渲染

<div *ngFor="let item of arr">{{item.name}}</div>
<div *ngIf="isShow">你好</div>
<img [src]="imageUrl" alt="">
<p (click)="handleClick()">{{msg}}</p>

1.双向数据绑定

1.1 app.module.ts中配置

import {FormsModule} from '@angular/forms'
...
 imports: [
    BrowserModule,
    FormsModule
  ],

例子1 input框value值绑定

//heard.components.html
<input type="text" [(ngModel)]="msg">

//headr.components.ts
public msg:string="这是一个head"

例子2 check框checked值绑定

<input type="checkbox" [(ngModel)]="checked"
(ngModelChange)="handleCheck()"
>

三、事件

1.click

<p (click)="handleClick()">{{msg}}</p>

public checked:boolean=true;
handleCheck(){
  console.log(this.checked)
}

export class HeaderComponent implements OnInit {
  ....
  public msg:string ="我喜欢写代码"
  constructor() { }
  ngOnInit() {
  }
  handleClick(){
    this.msg = "change"
  }
}

2.keyup

<input type="text" (keyup)="handleEnter($event)">

handleEnter(event:any){
    console.log(event.keyCode)
}

2.1keyup.enter

handleEnter(value:string){
    console.log(value)
}

3.ngModelChange

获取输入框值

//heard...html
<input type="text" [(ngModel)]="msg"
(ngModelChange)="handleChange($event)"
>

handleChange(e){
  console.log(e)
}

四、读取对象的属性

public data:any={
name:"yuan",
  age:12
}
//读取
data['name']