溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關angular10中怎么利用模板進行數據綁定，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
綁定語法歸納起來大概有三種(基礎)
model => view (單向：插值、屬性綁定、樣式綁定)
view => model(單向：事件綁定)
view <=> model（雙向：ngModule）
【相關教程推薦：《angular教程》】
<!-- model => view -->
{{expression}}
[target]="expression"
bind-target="expression"
<p> {{ msg }} </p> // 插值表達式
<img [src]="heroImageUrl"> // 屬性綁定
<app-hero-detail [hero]="currentHero"></app-hero-detail> // 組件通過屬性綁定的方式傳參
<div [ngClass]="{'special': isSpecial}"></div> // 樣式綁定
<div [class.special]="isSpecial">Special</div> // class綁定
<button [style.color]="isSpecial ? 'red' : 'green'"> // style綁定
<button [attr.aria-label]="help">help</button> // Attribute綁定
<!-- view => model -->
(target)="statement"
on-target="statement"
<button (click)="onSave()">Save</button> // 元素事件
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> // 組件事件，用于監聽子組件傳遞過來的參數
<div (myClick)="clicked=$event" clickable>click me</div> // 指令事件
<!-- view <=> model -->
[(target)]="expression"
bindon-target="expression"
<input [(ngModel)]="name"> // 雙向數據綁定HTML attribute 與 DOM property 的對比（很重要，加強理解）
理解 HTML 屬性和 DOM 屬性之間的區別，是了解 Angular 綁定如何工作的關鍵。Attribute 是由 HTML 定義的。Property 是從 DOM（文檔對象模型）節點訪問的
一些 HTML Attribute 可以 1:1 映射到 Property；例如，“ id”。
某些 HTML Attribute 沒有相應的 Property。例如，aria-* colSpan rowSpan。
某些 DOM Property 沒有相應的 Attribute。例如，textContent。
重要的是要記住，HTML Attribute 和 DOM Property 是不同的，就算它們具有相同的名稱也是如此。 在 Angular 中，HTML Attribute 的唯一作用是初始化元素和指令的狀態。
模板綁定使用的是 Property 和事件，而不是 Attribute。
編寫數據綁定時，你只是在和目標對象的 DOM Property 和事件打交道。
注意：
該通用規則可以幫助你建立 HTML Attribute 和 DOM Property 的思維模型： 屬性負責初始化 DOM 屬性，然后完工。Property 值可以改變；Attribute 值則不能。
此規則有一個例外。 可以通過 setAttribute() 來更改 Attribute，接著它會重新初始化相應的 DOM 屬性。
案例1：input
<input type="text" value="Sarah">
當瀏覽器渲染input時，它會創建一個對應的 DOM 節點，其 value Property 已初始化為 “Sarah”。
當用戶在 input 中輸入 Sally 時，DOM 元素的 value Property 將變為 Sally。 但是，如果使用 input.getAttribute('value') 查看 HTML 的 Attribute value，則可以看到該 attribute 保持不變 —— 它返回了 Sarah。
HTML 的 value 這個 attribute 指定了初始值；DOM 的 value 就是這個 property 是當前值。
案例2：禁用按鈕
disabled Attribute 是另一個例子。按鈕的 disabled Property 默認為 false，因此按鈕是啟用的。
當你添加 disabled Attribute 時，僅僅它的出現就將按鈕的 disabled Property 初始化成了 true，因此該按鈕就被禁用了。
<button disabled>Test Button</button>
添加和刪除 disabled Attribute 會禁用和啟用該按鈕。 但是，Attribute 的值無關緊要，這就是為什么你不能通過編寫 仍被禁用 來啟用此按鈕的原因。
要控制按鈕的狀態，請設置 disabled Property，
<input [disabled]="condition ? true : false"> <input [attr.disabled]="condition ? 'disabled' : null">
模版中除了綁定變量，還能綁定方法
模版中還可以寫些簡單的邏輯，比如判斷或運算
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<p>變量綁定：{{ title }}</p>
<p>方法綁定：{{ getVal }}</p>
<p>方法綁定：{{ getVal2() }}</p>
<p>簡單運算 {{ 1 + 1 }}.</p>
<p>簡單運算 {{ price * 0.7 }}.</p>
<p>簡單運算：{{ gender === 0 ? '男':'女' }}</p>
<p>與方法結合 {{ price * 0.7 + getVal }}.</p>
<p>與方法結合 {{ price * 0.7 + getVal2() }}.</p>
`,
})
export class AppComponent {
title = "模板綁定"；
price = 30;
gender = 0;
get getVal(): number { //es6新語法,函數可以當做變量來使用
return 20;
}
getVal2(): number {
return 33;
}
}當使用模板表達式時，請遵循下列指南：
非常簡單
執行迅速
沒有可見的副作用(即模版中的邏輯不能改變組件的變量)
綁定圖片
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<img src="../assets/images/madao.jpg" alt="madao" />
<img [src]="madaoSrc" alt="madao" /> // 推薦
<img bind-src="madaoSrc" alt="madao" />
`,
styles: []
})
export class AppComponent {
madaoSrc = '../assets/images/madao.jpg';
}綁定普通屬性
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<img [src]="user.pic" [alt]="user.name" />
<table class="table-bordered">
<tr>
<th>name</th>
<th>phone</th>
<th>age</th>
</tr>
<tr>
<td>張三</td>
<td>13398490594</td>
<td>33</td>
</tr>
<tr>
<td [colSpan]="colSpan">李四</td> // 注意colSpan和colspan
<td>15079049984</td>
<td>22</td>
</tr>
</table>
<button class="btn btn-primary" [disabled]="isDisabled">click</button>
`,
styles: []
})
export class AppComponent {
madaoSrc = '../assets/images/madao.jpg';
user = {
name: 'madao',
pic: this.madaoSrc
};
colSpan = 2;
isDisabled = false;
}綁定自定義屬性
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<span [attr.data-title]="customTitle">一行文字</span>
<span [attr.title]="customTitle">test title</span>
<span [title]="customTitle">test title</span>
`,
styles: []
})
export class AppComponent {
madaoSrc = '../assets/images/madao.jpg';
customTitle = 'bbb';
}使用插值表達式（不推薦）
插值也可以用于屬性，但常規做法還是用中括號[]，建議整個項目保持風格統一
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<img src="{{ user.pic }}" alt="{{ user.name }}" />
`,
styles: []
})
export class AppComponent {
madaoSrc = '../assets/images/madao.jpg';
user = {
name: 'madao',
pic: this.madaoSrc
};
}綁定單個樣式
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button type="button" class="btn" [class.btn-primary]="theme === 'primary'">Primary</button>
<button type="button" class="btn" [class.btn-secondary]="true">secondary</button>
<button type="button" class="btn" [class.btn-success]="isSuccess">success</button>
<button type="button" class="btn" [class.btn-danger]="'啦啦啦'">danger</button>
<button type="button" class="btn" [class.btn-danger]="0">danger</button> //false
<button type="button" class="btn" [class.btn-danger]="undefined">danger</button> //false
`,
styles: []
})
export class AppComponent {
theme = 'primary';
isSuccess = true;
}綁定多個class
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button type="button" [class]="btnCls">btnCls</button>
<button type="button" [class]="btnCls2">btnCls2</button>
<button type="button" [class]="btnCls3">btnCls3</button>
<!-- 也可以用內置指令ngClass -->
<button type="button" [ngClass]="btnCls">btnCls</button>
<button type="button" [ngClass]="btnCls2">btnCls2</button>
<button type="button" [ngClass]="btnCls3">btnCls3</button>
`,
styles: []
})
export class AppComponent {
btnCls = 'btn btn-primary';
btnCls2 = ['btn', 'btn-success'];
btnCls3 = {
btn: true,
'btn-info': true
};
}綁定單個style
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<p [style.color]="'#f60'">一段文字</p>
<p [style.height]="'50px'" [style.border]="'1px solid'">設置高度</p>
<p [style.height.px]="50" [style.border]="'1px solid'">設置高度</p>
`,
styles: []
})
export class AppComponent {}綁定多個style
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<p [style]="style1">style1</p>
<p [style]="style2">style2</p>
<p [style]="style3">style3</p>
<!-- 也可以用內置指令ngStyle, 但不推薦，以后可能會棄用 -->
<!-- <p [ngStyle]="style1">style1</p>-->
<!-- <p [ngStyle]="style2">style2</p>-->
<!-- ngStyle只接收對象 -->
<p [ngStyle]="style3">style3</p>
`,
styles: []
})
export class AppComponent {
style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;';
style2 = ['width', '200px', 'height', '50px', 'text-align', 'center', 'border', '1px solid']; // 有問題
style3 = {
width: '200px',
height: '50px',
'text-align': 'center',
border: '1px solid'
};
}綁定優先級
某個類或樣式綁定越具體，它的優先級就越高
綁定總是優先于靜態屬性
基本用法
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button type="button" class="btn btn-primary" (click)="onClick()">Primary</button>
`,
styles: []
})
export class AppComponent {
onClick() {
console.log('onClick');
}
}事件對象
$event 就是原生的事件對象
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button type="button" class="btn btn-primary" (click)="onClick($event)">Primary</button>
`,
styles: []
})
export class AppComponent {
onClick(event: MouseEvent) {
console.log('onClick', event.target);
//直接用event.target.value會報錯，要用類型斷言
console.log((event.target as HTMLInputElement).value)
}
}事件捕獲或事件冒泡
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div style="width:200px;height:200px;background-color:red;" (click)="parentClick()">
<!--<div style="width:100px;height:100px;background-color:blue;" (click)="chilrenClick($event)"></div>-->
<div style="width:100px;height:100px;background-color:blue;" (click)="$event.stopPropagation()"></div> //可以在html使用一些簡單的語法
</div>
`,
styles: []
})
export class AppComponent {
parentClick() {
console.log('parentClick');
}
chilrenClick(event: MouseEvent) {
event.stopPropagation(); //阻止事件冒泡
console.log('chilrenClick');
}
}輸入輸出屬性（主要是子傳父，通過自定義事件）
輸入屬性
子組件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-root',
template: `<p>
Today's item: {{item}}
</p>`
})
export class ItemDetailComponent {
@Input() item: string;
}父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-detail [item]="currentItem"></app-item-detail>
`,
})
export class AppComponent {
currentItem = 'Television';
}輸出屬性
通過 new EventEmitter() 自定義一個事件；
調用 EventEmitter.emit(data) 發出事件，傳入數據；
父指令通過監聽自定義事件，并通過傳入的 $event 對象接收數據。
子組件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
template: `<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>`,
})
export class ItemOutputComponent {
@Output() newItemEvent = new EventEmitter<string>(); //子傳父，輸出屬性
addNewItem(value: string) {
this.newItemEvent.emit(value); //自定義事件觸發
}
}父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-output (newItemEvent)="addItem($event)"></app-item-output> //監聽自定義事件
`,
})
export class AppComponent {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}在元數據中聲明輸入和輸出屬性
固然可以在 @Directive 和 @Component 元數據中聲明 inputs 和 outputs,但不推薦提供別名
@Input()和@Output()可以接收一個參數，作為變量的別名，那么父組件中只能用別名綁定
子組件
import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-root',
template: `<p>
Today's item: {{item}}
</p>`
})
export class ItemDetailComponent {
@Input('aliasItem') item: string;
@Output('newItem') newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-detail [aliasItem]="currentItem" //注意是綁定的別名
(newItem)="addItem($event)"></app-item-detail> //注意是監聽的別名
`,
})
export class AppComponent {
currentItem = 'Television';
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}輸入屬性一定要用中括號[]綁定？
如果綁定的值是靜態的，就不需要[]；為了統一風格盡量用上[]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-detail item="static item"></app-item-detail>
`,
})
export class AppComponent {
// currentItem = 'Television';
}先決條件
組件的屬性綁定
組件的事件綁定
輸入和輸出（父子組件通信）
基本的雙向綁定
子組件
import {Component, OnInit, ChangeDetectionStrategy, EventEmitter, Input, Output} from '@angular/core';@Component({ selector: 'app-sizer', template: `
<div>
<button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
<button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
`, styles: [
], changeDetection: ChangeDetectionStrategy.OnPush
})export class SizerComponent implements OnInit { @Input() size: number | string;
// 想要用雙向綁定語法，output變量名就一定是輸入屬性名加上Change @Output() sizeChange = new EventEmitter<number>(); constructor() { }
ngOnInit(): void {
} dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size);
}
}父組件
import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
`,
})export class AppComponent {
fontSizePx = 16;
}雙向綁定工作原理
為了使雙向數據綁定有效，@Output() 屬性的名字必須遵循 inputChange 模式，其中 input 是相應 @Input() 屬性的名字。例如，如果 @Input() 屬性為 size ，則 @Output() 屬性必須為 sizeChange 。
上面的 sizerComponent 具有值屬性 size 和事件屬性 sizeChange。 size 屬性是 @Input()，因此數據可以流入 sizerComponent 。 sizeChange 事件是一個 @Output() ，它允許數據從 sizerComponent 流出到父組件。
上面例子，有兩個方法， dec() 用于減小字體大小， inc() 用于增大字體大小。這兩種方法使用 resize() 在最小/最大值的約束內更改 size 屬性的值，并發出帶有新 size 值的事件。
簡寫形式
雙向綁定語法是屬性綁定和事件綁定的組合的簡寫形式
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
表單中的雙向綁定
因為沒有任何原生 HTML 元素遵循了 x 值和 xChange 事件的命名模式，所以與表單元素進行雙向綁定需要使用 NgModel
基本使用
根據之前基本的雙向綁定知識，[(ngModel)]語法可拆解為：
名為ngModel的輸入屬性
名為ngModelChange的輸出屬性
使用[(ngModule)]雙向綁定的前提條件是在模塊中引入FormsModule
import {Component} from '@angular/core';
@Component({
selector: 'example-app',
template: `
<input [(ngModel)]="name" #ctrl="ngModel" required>
<p>Value: {{ name }}</p>
<p>Valid: {{ ctrl.valid }}</p>
<button (click)="setValue()">Set value</button>
`,
})
export class SimpleNgModelComp {
name: string = '';
setValue() {
this.name = 'Nancy';
}
}<input [(ngModel)]="name" /> 上面這行代碼相當于： <input [value]="name" (input)="name = $event.target.value" />
在表單中的使用
表單中使用[(ngModel)]，需要做下面兩件事的其中之一
給控件加上name屬性
將ngModelOptions.standalone設為true
<form>
<input [(ngModel)]="value" name="name" />
<input [(ngModel)]="value" [ngModelOptions]="{ standalone: true }" />
</form>注意：表單中使用雙向數據綁定，知識點比較多，這里只做簡單了解，后續會出專門章節探討
循環指令 *ngFor （非常基礎，掌握）
arr:string[] = ['張三','李四','王五'];
trackByItems(index: number, item: Item): number { return item.id; }
<div *ngFor="let item of arr; let i=index" (click)='choseThis(item,i)'>
索引值：{{i}} -- 內容：{{item}}
</div>
//trackBy一般和長列表一起使用，減少dom替換次數，提升性能
<div *ngFor="let item of items; trackBy: trackByItems">
({{item.id}}) {{item.name}}
</div>條件渲染 *ngIf ngStyle ngClass ngSwitch（非常基礎）
isShow: Boolean = true;
personState: number = 2;
//頻繁切換不建議用，頻繁加載和移除有較高的性能消耗 （重要）
<p *ngIf="isShow">命令模式</p> // 不頻繁切換推薦用
<p [hidden]="isShow">命令模式</p> // 頻繁切換推薦用
currentStyles = {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '12px'
};
<div [ngClass]="isSpecial ? 'special' : ''">ngClass</div>
<div [ngStyle]="currentStyles">
ngStyle
</div>
// 使用樣式有2種（style.dispaly 和 class.hidden）
<p [style.display]="isShow?'block':'none'">style模式</p> //頻繁切換建議用樣式
<p [class.hidden]="isShow">class模式</p>
//匹配多種情況的條件渲染，跟vue的v-if/v-else-if/v-else類似
//適合多種狀態，顯示一種的情況
<div [ngSwitch] = 'personState'>
<div *ngSwitchCase="1">工作</div>
<div *ngSwitchCase="2">吃飯</div>
<div *ngSwitchDefault>睡覺</div>
</div>雙向數據綁定指令 [(ngModel)]
//Angular不能直接識別ngModel，需要通過引入模塊FormsModule來訪問
import {FormsModule} from '@angular/forms';
imports: [FormsModule]
public name = "張三";
<input [(ngModel)] = "name" type="text"> //人工綁定，更好的做法是通過響應式表單綁定
<input bindon-change="name" type="text"> //備選
//屬性綁定+事件綁定 = ngModel （重要）
<input [value]="name" (input)="name=$event.target.value" >基本使用
使用井號（#）聲明模板引用變量，可以獲取DOM 元素、指令、組件、TemplateRef 或 Web Component。
import {Component} from '@angular/core';
@Component({
selector: 'app-tpl-var',
template: `
<input #phone placeholder="phone number" />
<button (click)="callPhone(phone.value)">Call</button>
`,
})
export class TplVarComponent {
constructor() { }
callPhone(value: string) {
console.log('callPhone', value);
}
}ref
還有種寫法就是ref, 下面兩種寫法是一樣的
<input #fax placeholder="fax number" /> <input ref-fax placeholder="fax number" />
引用組件
在組件章節，介紹了獲取子組件的屬性和方法，有兩種方法：本地變量和@viewChild()
import {Component} from '@angular/core';
@Component({
selector: 'app-tpl-var',
template: `
<div class="demo-sec">
<button class="btn btn-primary" (click)="sizer.inc()">app inc</button>
<app-sizer [(size)]="size" #sizer></app-sizer>
size: {{ size }}
</div>
`,
})
export class TplVarComponent {
size = 16;
constructor() { }
}輸入屬性
子組件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-root',
template: `<p>
Today's item: {{item}}
</p>`
})
export class ItemDetailComponent {
@Input() item: string;
}父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-detail [item]="currentItem"></app-item-detail>
`,
})
export class AppComponent {
currentItem = 'Television';
}輸出屬性
子組件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
template: `<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>`,
})
export class ItemOutputComponent {
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
`,
})
export class AppComponent {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}在元數據中聲明輸入和輸出屬性
固然可以在 @Directive 和 @Component 元數據中聲明 inputs 和 outputs, 不推薦提供別名。
@Input()和@Output()可以接收一個參數，作為變量的別名，那么父組件中只能用別名綁定 子組件
import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-root',
template: `<p>
Today's item: {{item}}
</p>`
})
export class ItemDetailComponent {
@Input('aliasItem') item: string; // decorate the property with @Input()
@Output('newItem') newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}父組件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-detail [aliasItem]="currentItem" (newItem)="addItem($event)"></app-item-detail>
`,
})
export class AppComponent {
currentItem = 'Television';
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}輸入屬性一定要用中括號[]綁定？
如果綁定的值是靜態的，就不需要[]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-item-detail item="static item"></app-item-detail>
`,
})
export class AppComponent {
// currentItem = 'Television';
}常用的管道
1、大小寫字母轉換
str = 'Hello';
str1 = 'World';
<p>{{str | uppercase}}-{{str1 | lowercase}} </p> //str:hello str1:WORLD2、 日期格式化（經常使用）
today = new Date();
<p>現在的時間是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>3、保留小數后面多少位 下面例子的含義是，3表示最少幾位整數，后面的2-4表示最少最少2位小數，最多4位小數，不足補零，小數會四舍五入。
num = 125.156896;
<p>num保留4位小數的值是：{{num | number:'3.2-4'}}</p> //125.15694、貨幣轉換
count = 5;
price = 1.5;
<p>數量：{{count}}</p> // 數據：5
<p>價格：{{price}}</p> // 價格：1.5
<p>總價：{{(price * count) | currency:'￥'}}</p> // 價格：￥7.55、字符串截取
name = '只對你說';
<p>{{name | slice : 2 : 4}}</p> // 你說6、json格式化(有時需要看一下數據)
<p>{{ { name: 'semlinker' } | json }}</p> // { "name": "semlinker" }自定義管道
1、創建管道文件
ng g pipe /piper/mypiper
2、在管道文件中寫自己的邏輯transform兩個參數分別表示傳入值和參數
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'multiple'
})
export class MypiperPipe implements PipeTransform {
transform(value: any, args?: any): any {
//value:輸入值 args:參數
if(!args){//無參的情況下
args = 1;
}
return value*args;
}
}注意：通過命令行生成的管道（過濾器），會自動在全局聲明； 管道傳入的參數是在'：'冒號后面表示
看完上述內容，你們對angular10中怎么利用模板進行數據綁定有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
