Angular7 组件 以及组件里面的模板

版权声明：转载请记得声明 https://blog.csdn.net/qq_39268193/article/details/87857883

1.创建 Angular 组件

• 创建组件

ng g component components/header

• 使用组件

<app-header></app-header>

2.Angular 绑定数据

• 数据文本绑定 {{ }}
  

• 绑定 html
  

• 绑定属性
  

3.数据循环 *ngFor

• *ngFor 普通循环

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

• 循环的时候设置 key

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

4.条件判断 *ngIf

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

5.*ngSwitch

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

6.执行事件

<button class="button" (click)="getData()">
	点击按钮触发事件
</button>
<button class="button" (click)="setData()">
	点击按钮设置数据
</button>

getData(){ /*自定义方法获取数据*/
	//获取
	alert(this.msg);
}
setData(){
	//设置值
	this.msg='这是设置的值';
}

7.表单事件

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

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

8.双向数据绑定

• 首先引入 FormModule

  ... // 省略其他引入
  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}}
  

9.[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>
  

10.管道

public today=new Date();

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