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

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

 

一、创建 angualr 组件.............................................................................................................. 1

二、Angular 绑定数据...............................................................................................................2

二、绑定属性.............................................................................................................................2

三、数据循环 *ngFor............................................................................................................. 3

四、条件判断 *ngIf................................................................................................................ 3

四、 *ngSwitch..........................................................................................................................4

五、执行事件

(click)=”getData()”........................................................................................ 4

七、表单事件.............................................................................................................................5

八、双向数据绑定.....................................................................................................................5

九、 [ngClass]、[ngStyle]..........................................................................................................6

十、 管道...................................................................................................................................7

一、创建 angualr 组件

Angular CLI:

https://cli.angular.io/

创建组件

ng g component components/header

使用组件

<app-header></app-header>二、Angular 绑定数据

1. 数据文本绑定

{{}}

<h1>

{{title}}

</h1>

<div>

1+1={{1+1}}

</div>

2.绑定 html

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

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

二、绑定属性

<div [id]="id" [title]="msg">调试工具看看我的属性</div>三、数据循环 *ngFor

1、*ngFor

普通循环

<ul>

<li *ngFor="let item of list">

{{item}}

</li>

</ul>

2、循环的时候设置 key

<ul>

<li *ngFor="let item of list;let i = index;">

{{item}} --{{i}}

</li>

</ul>

2. template 循环数据

<ul>

<li template="ngFor let item of list">

{{item}}

</li>

</ul>

四、条件判断 *ngIf

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

四、*ngSwitch

<ul [ngSwitch]="score">

<li *ngSwitchCase="1">已支付</li>

<li *ngSwitchCase="2">订单已经确认</li>

<li *ngSwitchCase="3">已发货</li>

<li *ngSwitchDefault>无效</li>

</ul>

五、执行事件

(click)=”getData()”

<button class="button" (click)="getData()">

点击按钮触发事件

</button>

<button class="button" (click)="setData()">

点击按钮设置数据

</button>

getData(){ /*自定义方法获取数据*/

//获取

alert(this.msg);

}

setData(){

//设置值

this.msg='这是设置的值';

}七、表单事件

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

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

keyUpFn(e){

console.log(e)

}

八、双向数据绑定

<input [(ngModel)]="inputValue">

注意引入：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}}

九、[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>

十、管道

public today=new Date();

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

其他管道：