Angular7 组件 以及组件里面的模板
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>