聊聊angular10中模板如何進行資料綁定？-js教程-PHP中文網

首頁

web前端

js教程

聊聊angular10中模板如何進行資料綁定？

青灯夜游

Aug 03, 2021 am 10:31 AM

angular範本

本篇文章跟大家介紹一下angular10模板的資料綁定，帶大家了解一下三種綁定語法、模板/插值表達式、屬性綁定、樣式綁定、事件綁定定、雙向綁定、內建指令、模板引用變數等等。

聊聊angular10中模板如何進行資料綁定？

綁定語法概覽

#綁定語法歸納起來大概有三種(基礎)

model => view (單向：插值、屬性綁定、樣式綁定)
view => model(單向：事件綁定)
view model（雙向：ngModule）

【相關教學推薦：《angular教學》】

<!-- model => view -->
{{expression}}
[target]="expression"
bind-target="expression"

<p> {{ msg }} </p>  // 插值表达式
<img  src="/static/imghwm/default1.png"  data-src="../assets/images/madao.jpg"  class="lazy"  [src]="heroImageUrl" alt="聊聊angular10中模板如何進行資料綁定？" > // 属性绑定
<app-hero-detail [hero]="currentHero"></app-hero-detail> // 组件通过属性绑定的方式传参
<div [ngClass]="{&#39;special&#39;: isSpecial}"></div> // 样式绑定
<div [class.special]="isSpecial">Special</div> // class绑定
<button [style.color]="isSpecial ? &#39;red&#39; : &#39;green&#39;"> // 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 ? &#39;disabled&#39; : null">

#範本/插值表達式{{}} （基礎，掌握）

模版中除了綁定變量，還能綁定方法

模版中還可以寫些簡單的邏輯，例如判斷或運算

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
      <p>变量绑定：{{ title }}</p>
      <p>方法绑定：{{ getVal }}</p>
      <p>方法绑定：{{ getVal2() }}</p>
      <p>简单运算 {{ 1 + 1 }}.</p>
      <p>简单运算 {{ price * 0.7 }}.</p>
      <p>简单运算：{{ gender === 0 ? &#39;男&#39;:&#39;女&#39; }}</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 &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
    <img src="/static/imghwm/default1.png"  data-src="../assets/images/madao.jpg"  class="lazy"   alt="madao" />
    <img src="/static/imghwm/default1.png"  data-src="madaoSrc"  class="lazy"  [src]="madaoSrc" alt="madao" /> // 推荐
    <img src="/static/imghwm/default1.png"  data-src="madaoSrc"  class="lazy"  bind- alt="madao" />
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = &#39;../assets/images/madao.jpg&#39;;
}

綁定普通屬性

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
    <img src="/static/imghwm/default1.png"  data-src="{{ user.pic }}"  class="lazy"  [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 = &#39;../assets/images/madao.jpg&#39;;
  user = {
   name: &#39;madao&#39;,
   pic: this.madaoSrc
  };
  colSpan = 2;
  isDisabled = false;
}

綁定自訂屬性

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  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 = &#39;../assets/images/madao.jpg&#39;;
  customTitle = &#39;bbb&#39;;
}

使用插值表達式（不建議）

插值也可以用於屬性，但常規做法還是用中括號[]，建議整個項目保持風格統一

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
    <img src="/static/imghwm/default1.png"  data-src="{{ user.pic }}"  class="lazy"   alt="{{ user.name }}" />
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = &#39;../assets/images/madao.jpg&#39;;
  user = {
    name: &#39;madao&#39;,
    pic: this.madaoSrc
  };
}

樣式綁定（屬於屬性綁定，基礎，掌握）

綁定單一樣式

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
      <button type="button" class="btn" [class.btn-primary]="theme === &#39;primary&#39;">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]="&#39;啦啦啦&#39;">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 = &#39;primary&#39;;
    isSuccess = true;
}

綁定多個class

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  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 = &#39;btn btn-primary&#39;;
    btnCls2 = [&#39;btn&#39;, &#39;btn-success&#39;];
    btnCls3 = {
      btn: true,
      &#39;btn-info&#39;: true
    };
}

綁定單一style

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
      <p [style.color]="&#39;#f60&#39;">一段文字</p>
      <p [style.height]="&#39;50px&#39;" [style.border]="&#39;1px solid&#39;">设置高度</p>
      <p [style.height.px]="50" [style.border]="&#39;1px solid&#39;">设置高度</p>
    `,
  styles: []
})
export class AppComponent {}

綁定多個style

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  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 = &#39;width: 200px;height: 50px;text-align: center;border: 1px solid;&#39;;
  style2 = [&#39;width&#39;, &#39;200px&#39;, &#39;height&#39;, &#39;50px&#39;, &#39;text-align&#39;, &#39;center&#39;, &#39;border&#39;, &#39;1px solid&#39;]; // 有问题
  style3 = {
    width: &#39;200px&#39;,
    height: &#39;50px&#39;,
    &#39;text-align&#39;: &#39;center&#39;,
    border: &#39;1px solid&#39;
  };
}

綁定優先權

某個類別或樣式綁定越具體，它的優先權就越高
綁定總是優先於靜態屬性

#事件綁定（基礎，掌握）

#基本用法

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
      <button type="button" class="btn btn-primary" (click)="onClick()">Primary</button>
    `,
  styles: []
})
export class AppComponent {
    onClick() {
      console.log(&#39;onClick&#39;);
    } 
}

事件对象

$event 就是原生的事件对象

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
      <button type="button" class="btn btn-primary" (click)="onClick($event)">Primary</button>
    `,
  styles: []
})
export class AppComponent {
    onClick(event: MouseEvent) {
      console.log(&#39;onClick&#39;, event.target);
      //直接用event.target.value会报错，要用类型断言
      console.log((event.target as HTMLInputElement).value)
    }
}

事件捕获或事件冒泡

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  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(&#39;parentClick&#39;);
  }
  chilrenClick(event: MouseEvent) {
    event.stopPropagation();  //阻止事件冒泡
    console.log(&#39;chilrenClick&#39;);
  }
}

输入输出属性（主要是子传父，通过自定义事件）

输入属性

子组件

import { Component, Input } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `<p>
               Today&#39;s item: {{item}}
             </p>`
})
export class ItemDetailComponent  {
  @Input() item: string;
}

父组件

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-detail [item]="currentItem"></app-item-detail>
  `,
})
export class AppComponent {
  currentItem = &#39;Television&#39;;
}

输出属性

通过 new EventEmitter() 自定义一个事件；
调用 EventEmitter.emit(data) 发出事件，传入数据；
父指令通过监听自定义事件，并通过传入的 $event 对象接收数据。

子组件

import { Component, Output, EventEmitter } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `<label>Add an item: <input #newItem></label>
             <button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>`,
})
export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter<string>(); //子传父，输出属性
  addNewItem(value: string) {
    this.newItemEvent.emit(value); //自定义事件触发
  }
}

父组件

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-output (newItemEvent)="addItem($event)"></app-item-output> //监听自定义事件
  `,
})
export class AppComponent {
   items = [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;, &#39;item4&#39;];
    addItem(newItem: string) {
      this.items.push(newItem);
    }
}

在元数据中声明输入和输出属性

固然可以在 @Directive 和 @Component 元数据中声明 inputs 和 outputs,但不推荐提供别名

@Input()和@Output()可以接收一个参数，作为变量的别名，那么父组件中只能用别名绑定

子组件

import { Component, Input, EventEmitter, Output } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `<p>
               Today&#39;s item: {{item}}
             </p>`
})
export class ItemDetailComponent  {
  @Input(&#39;aliasItem&#39;) item: string; 
  @Output(&#39;newItem&#39;) newItemEvent = new EventEmitter<string>();
  
  addNewItem(value: string) {
     this.newItemEvent.emit(value);
   }
}

父组件

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-detail [aliasItem]="currentItem" //注意是绑定的别名
     (newItem)="addItem($event)"></app-item-detail> //注意是监听的别名
  `,
})
export class AppComponent {
  currentItem = &#39;Television&#39;;
  items = [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;, &#39;item4&#39;];
  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

输入属性一定要用中括号[]绑定？

如果绑定的值是静态的，就不需要[]；为了统一风格尽量用上[]

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-detail item="static item"></app-item-detail>
  `,
})
export class AppComponent {
  // currentItem = &#39;Television&#39;;
}

双向绑定（基础，掌握）

先决条件

组件的属性绑定
组件的事件绑定
输入和输出（父子组件通信）

基本的双向绑定

子组件

import {Component, OnInit, ChangeDetectionStrategy, EventEmitter, Input, Output} from &#39;@angular/core&#39;;@Component({  selector: &#39;app-sizer&#39;,  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 &#39;@angular/core&#39;;@Component({  selector: &#39;app-root&#39;,  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 &#39;@angular/core&#39;;

@Component({
  selector: &#39;example-app&#39;,
  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 = &#39;&#39;;

  setValue() {
    this.name = &#39;Nancy&#39;;
  }
}

<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[] = [&#39;张三&#39;,&#39;李四&#39;,&#39;王五&#39;]; 
trackByItems(index: number, item: Item): number { return item.id; }

<div *ngFor="let item of arr; let i=index" (click)=&#39;choseThis(item,i)&#39;>
   索引值：{{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 = {
      &#39;font-style&#39;:  this.canSave      ? &#39;italic&#39; : &#39;normal&#39;,
      &#39;font-weight&#39;: !this.isUnchanged ? &#39;bold&#39;   : &#39;normal&#39;,
      &#39;font-size&#39;:   this.isSpecial    ? &#39;24px&#39;   : &#39;12px&#39;
};
<div [ngClass]="isSpecial ? &#39;special&#39; : &#39;&#39;">ngClass</div>
<div [ngStyle]="currentStyles">
  ngStyle
</div>

// 使用样式有2种（style.dispaly 和 class.hidden）
<p [style.display]="isShow?&#39;block&#39;:&#39;none&#39;">style模式</p> //频繁切换建议用样式
<p [class.hidden]="isShow">class模式</p>


//匹配多种情况的条件渲染，跟vue的v-if/v-else-if/v-else类似
//适合多种状态，显示一种的情况
<div [ngSwitch] = &#39;personState&#39;>
    <div *ngSwitchCase="1">工作</div>
    <div *ngSwitchCase="2">吃饭</div>
    <div *ngSwitchDefault>睡觉</div>
</div>

双向数据绑定指令 [(ngModel)]

//Angular不能直接识别ngModel，需要通过引入模块FormsModule来访问
import {FormsModule} from &#39;@angular/forms&#39;;
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 &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-tpl-var&#39;,
  template: `
    <input #phone placeholder="phone number" />
    <button (click)="callPhone(phone.value)">Call</button>
  `,
})
export class TplVarComponent {
  constructor() { }
  callPhone(value: string) {
    console.log(&#39;callPhone&#39;, value);
  }
}

ref

还有种写法就是ref, 下面两种写法是一样的

<input #fax placeholder="fax number" />

<input ref-fax placeholder="fax number" />

引用组件

在组件章节，介绍了获取子组件的属性和方法，有两种方法：本地变量和@viewChild()

import {Component} from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-tpl-var&#39;,
  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 &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `<p>
               Today&#39;s item: {{item}}
             </p>`
})
export class ItemDetailComponent  {
  @Input() item: string;
}

父组件

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-detail [item]="currentItem"></app-item-detail>
  `,
})
export class AppComponent {
  currentItem = &#39;Television&#39;;
}

输出属性

子组件

import { Component, Output, EventEmitter } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `<label>Add an item: <input #newItem></label>
             <button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>`,
})
export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter<string>();
  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

父组件

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-output (newItemEvent)="addItem($event)"></app-item-output>
  `,
})
export class AppComponent {
   items = [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;, &#39;item4&#39;];
    addItem(newItem: string) {
      this.items.push(newItem);
    }
}

在元数据中声明输入和输出属性

固然可以在 @Directive 和 @Component 元数据中声明 inputs 和 outputs, 不推荐提供别名。

@Input()和@Output()可以接收一个参数，作为变量的别名，那么父组件中只能用别名绑定子组件

import { Component, Input, EventEmitter, Output } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `<p>
               Today&#39;s item: {{item}}
             </p>`
})
export class ItemDetailComponent  {
  @Input(&#39;aliasItem&#39;) item: string; // decorate the property with @Input()
  @Output(&#39;newItem&#39;) newItemEvent = new EventEmitter<string>();
  addNewItem(value: string) {
     this.newItemEvent.emit(value);
   }
}

父组件

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-detail [aliasItem]="currentItem" (newItem)="addItem($event)"></app-item-detail>
  `,
})
export class AppComponent {
  currentItem = &#39;Television&#39;;
  items = [&#39;item1&#39;, &#39;item2&#39;, &#39;item3&#39;, &#39;item4&#39;];
  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

输入属性一定要用中括号[]绑定？

如果绑定的值是静态的，就不需要[]

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  template: `
     <app-item-detail item="static item"></app-item-detail>
  `,
})
export class AppComponent {
  // currentItem = &#39;Television&#39;;
}

管道（基础，掌握）

常用的管道

1、大小写字母转换

str = &#39;Hello&#39;;
str1 = &#39;World&#39;;
<p>{{str | uppercase}}-{{str1 | lowercase}} </p>  //str:hello str1:WORLD

2、日期格式化（经常使用）

today = new Date();

<p>现在的时间是{{today | date:&#39;yyyy-MM-dd HH:mm:ss&#39;}}</p>

3、保留小数后面多少位下面例子的含义是，3表示最少几位整数，后面的2-4表示最少最少2位小数，最多4位小数，不足补零，小数会四舍五入。

num = 125.156896;

<p>num保留4位小数的值是：{{num | number:&#39;3.2-4&#39;}}</p> //125.1569

4、货币转换

count = 5;
price = 1.5;

<p>数量：{{count}}</p> // 数据：5
<p>价格：{{price}}</p> // 价格：1.5
<p>总价：{{(price * count) | currency:&#39;￥&#39;}}</p> // 价格：￥7.5

5、字符串截取

name = &#39;只对你说&#39;;

<p>{{name | slice : 2 : 4}}</p> // 你说

6、json格式化(有时需要看一下数据)

 <p>{{ { name: &#39;semlinker&#39; } | json }}</p> // { "name": "semlinker" }

自定义管道

1、创建管道文件

ng g pipe /piper/mypiper

2、在管道文件中写自己的逻辑transform两个参数分别表示传入值和参数

import { Pipe, PipeTransform } from &#39;@angular/core&#39;;

@Pipe({
  name: &#39;multiple&#39;
})
export class MypiperPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    //value:输入值 args:参数
    if(!args){//无参的情况下
      args = 1;
    }
    return value*args;
  }
}

注意：通过命令行生成的管道（过滤器），会自动在全局声明；管道传入的参数是在'：'冒号后面表示

更多编程相关知识，请访问：编程视频！！

以上是聊聊angular10中模板如何進行資料綁定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。