Angular--（二）常用方法记录

ng g component components/header //创建组件

1、数据文本绑定

<h1> 
    {{title}} // Angular 中使用 {{}} 绑定业务逻辑里面定义的数据
</h1>

2、绑定 html

this.h="<h2>这是一个h2用的[innerHTML]来解析</h2>"

<div [innerHTML]="h"></div>

3、绑定属性

//id 与 msg都是在组件的.ts文件中定义的属性

<div [id]="id" [title]="msg">测试工具看看我属性</div>

4、简单数据循环

//list 也是组件中定义的属性 public list:any=[];

<ul>
    <li *ngFor="let item of list">
    {{item}}
    </li>
</ul>

5、循环的时候设置key

<ul>
    <li *ngFor="let item of list;let i = index;">
    {{item}}--{{i}}
    </li>
</ul>

6、管道

public today=new Date();

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>     

//其他管道    http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34

7、条件判断

<p *ngIf="list.length > 3">这是ngIf判断是否显示</p>

8、ngSwitch

<ul [ngSwitch]="score">
    <li *ngSwitchCase="1">已支付</li>
	<li *ngSwitchCase="2">订单已经确认</li>
	<li *ngSwitchCase="3">已发货</li>
	<li *ngSwitchDefault>无效</li>
</ul>

9、执行事件

<button class="button" (click)="getData()">点击按钮触发事件</button>

<button class="button" (click)="setData()">点击按钮设置数据</button>

getData(){
    alert(this.msg);
}

setData(){
    this.msg='这是设置的值';
}

10、表单事件

<input type="text" (keyup)="keyUpFn($event)"/>
    
keyUpFn(e){
    console.log(e);
}

11、双向数据绑定

//引入FormsModule

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent
], imports: [
    BrowserModule,
    FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

//使用
<input type="text" [(ngModel)]="inputValue"/>{{inputValue}}

12、[ngClass]、[ngStyle]

//[ngClass]
<div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div</div>

public flag=false;
<div [ngClass]="{'red': flag, 'blue': !flag}">这是一个 div </div>

public arr = [1, 3, 4, 5, 6];
<ul>
	<li *ngFor="let item of arr, let i = index"> 
    	<span [ngClass]="{'red': i==0}">{{item}}</span>
	</li>
</ul>


//[ngStyle]
<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
public attr='red';
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>