Lassen Sie uns darüber sprechen, wie die Datenbindung für Vorlagen in Angular10 durchgeführt wird.-js-Tutorial-php.cn

Dieser Artikel stellt Ihnen die Datenbindung von angular10-Vorlagen vor und führt Sie durch die drei Bindungssyntaxen, Vorlagen-/Interpolationsausdrücke, Attributbindung, Stilbindung, Ereignisbindung, bidirektionale Bindung, integrierte Anweisungen und Vorlage Referenzvariablen und mehr.

Lassen Sie uns darüber sprechen, wie die Datenbindung für Vorlagen in Angular10 durchgeführt wird.

Übersicht über die Bindungssyntax

Die Bindungssyntax kann in drei Typen zusammengefasst werden (grundlegend)

Modell => Ansicht (einseitig: Interpolation, Attributbindung, Stilbindung)
view => Modell (einseitig: Ereignisbindung)
view <=> Modell (zweiseitig: ngModule)

【Verwandte Tutorial-Empfehlung: „Angular-Tutorial“】

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

<p> {{ msg }} </p>  // 插值表达式
<img [src]="heroImageUrl"> // 属性绑定
<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"> // 双向数据绑定

Nach dem Login kopieren

HTML-Vergleich von Attributen und DOM-Eigenschaften (sehr wichtig, stärkt das Verständnis)

Das Verständnis des Unterschieds zwischen HTML-Attributen und DOM-Attributen ist der Schlüssel zum Verständnis der Funktionsweise der Angular-Bindung. Attribute werden durch HTML definiert. Der Zugriff auf Eigenschaften erfolgt über DOM-Knoten (Document Object Model).

Einige HTML-Attribute können 1:1 Eigenschaften zugeordnet werden, beispielsweise „id“.
Einige HTML-Attribute haben keine entsprechenden Eigenschaften. Beispiel: aria-* colSpan rowSpan.
Einige DOM-Eigenschaften haben keine entsprechenden Attribute. Zum Beispiel textContent.

Es ist wichtig, sich daran zu erinnern, dass HTML-Attribute und DOM-Eigenschaften unterschiedlich sind, auch wenn sie denselben Namen haben. In Angular besteht der einzige Zweck von HTML-Attributen darin, den Status von Elementen und Anweisungen zu initialisieren.

Die Vorlagenbindung verwendet Eigenschaften und Ereignisse anstelle von Attributen.

Beim Schreiben der Datenbindung beschäftigen Sie sich nur mit den DOM-Eigenschaften und Ereignissen des Zielobjekts.

Hinweis:

Diese allgemeine Regel kann Ihnen dabei helfen, ein mentales Modell von HTML-Attributen und DOM-Eigenschaften zu erstellen: Eigenschaften sind für die Initialisierung und anschließende Fertigstellung der DOM-Eigenschaften verantwortlich. Eigenschaftswerte können sich ändern; Attributwerte können sich nicht ändern.

Es gibt eine Ausnahme von dieser Regel. Attribute können über setAttribute() geändert werden, wodurch dann die entsprechenden DOM-Attribute neu initialisiert werden.

Fall 1: Eingabe

<input type="text" value="Sarah">

Nach dem Login kopieren

Wenn der Browser die Eingabe rendert, erstellt er einen entsprechenden DOM-Knoten, dessen Wert Property auf „Sarah“ initialisiert wurde.

Wenn der Benutzer Sally in die Eingabe eingibt, wird der Wert Property des DOM-Elements zu Sally. Wenn Sie sich jedoch den Attributwert des HTML mit input.getAttribute('value') ansehen, können Sie sehen, dass das Attribut unverändert bleibt – es gibt Sarah zurück.

Das Wertattribut von HTML gibt den Anfangswert an. Der Wert von DOM ist, dass diese Eigenschaft der aktuelle Wert ist.

Fall 2: Deaktivierte Schaltfläche

disabled-Attribut ist ein weiteres Beispiel. Die Eigenschaft „disabled“ der Schaltfläche ist standardmäßig auf „false“ eingestellt, sodass die Schaltfläche aktiviert ist.

Wenn Sie das Attribut „disabled“ hinzufügen, initialisiert dessen bloße Anwesenheit die Eigenschaft „disabled“ der Schaltfläche auf „true“, sodass die Schaltfläche deaktiviert ist.

<button disabled>Test Button</button>

Nach dem Login kopieren

Durch Hinzufügen und Entfernen des deaktivierten Attributs wird die Schaltfläche deaktiviert und aktiviert. Der Wert des Attributs spielt jedoch keine Rolle, weshalb Sie diese Schaltfläche nicht durch Schreiben von stilldisabled aktivieren können.

Um den Status der Schaltfläche zu steuern, legen Sie bitte die deaktivierte Eigenschaft fest,

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? &#39;disabled&#39; : null">

Nach dem Login kopieren

Template/Interpolation Expression {{}} (Basic, Mastery)

Zusätzlich zum Binden von Variablen können Sie auch Methoden in Vorlagen binden

Sie können auch eine einfache Logik schreiben, z. B. eine Beurteilung oder eine Operation

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;
  }
}

Nach dem Login kopieren

Bei der Verwendung von Vorlagenausdrücken befolgen Sie bitte die folgenden Richtlinien:

Sehr einfach
Wird schnell ausgeführt
Keine sichtbaren Nebenwirkungen (d. h. die Logik in der Vorlage nicht veränderbar (Variablen von Komponenten)

Eigenschaftsbindung (einfach, Beherrschung)

Bilder binden

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

Nach dem Login kopieren

Gewöhnliche Eigenschaften binden

import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,
  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 = &#39;../assets/images/madao.jpg&#39;;
  user = {
   name: &#39;madao&#39;,
   pic: this.madaoSrc
  };
  colSpan = 2;
  isDisabled = false;
}

Nach dem Login kopieren

Benutzerdefinierte Eigenschaften binden

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;;
}

Nach dem Login kopieren

Verwenden Sie die Interpolationsausdrucksformel ( nicht empfohlen)

Interpolation kann auch für Attribute verwendet werden, aber normalerweise werden eckige Klammern [] verwendet. Es wird empfohlen, dass das gesamte Projekt einen einheitlichen Stil beibehält

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

Nach dem Login kopieren

Stilbindung (gehört zur Attributbindung , Grundlagen, Mastering)

Einen einzelnen Stil binden

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;
}

Nach dem Login kopieren

Mehrere Klassen binden

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
    };
}

Nach dem Login kopieren

Einen einzelnen Stil binden

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 {}

Nach dem Login kopieren

Mehrere Stile binden

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;
  };
}

Nach dem Login kopieren

Verbindliche Priorität

Die Je spezifischer eine Klassen- oder Stilbindung ist, desto höher ist ihre Priorität.
Bindungen haben immer Vorrang vor statischen Eigenschaften.

Ereignisbindung (Basic, Mastery).
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'); } }
Nach dem Login kopieren
事件对象
$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) } }
Nach dem Login kopieren
事件捕获或事件冒泡
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)="$event.stopPropagation()"></div> //可以在html使用一些简单的语法 </div> `, styles: [] }) export class AppComponent { parentClick() { console.log('parentClick'); } chilrenClick(event: MouseEvent) { event.stopPropagation(); //阻止事件冒泡 console.log('chilrenClick'); } }
Nach dem Login kopieren
输入输出属性（主要是子传父，通过自定义事件）
输入属性
子组件
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-root', template: `<p> Today's item: {{item}} </p>` }) export class ItemDetailComponent { @Input() item: string; }
Nach dem Login kopieren
Nach dem Login kopieren
父组件
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-item-detail [item]="currentItem"></app-item-detail> `, }) export class AppComponent { currentItem = 'Television'; }
Nach dem Login kopieren
Nach dem Login kopieren
输出属性
通过 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); //自定义事件触发 } }
Nach dem Login kopieren
父组件
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); } }
Nach dem Login kopieren
在元数据中声明输入和输出属性
固然可以在 @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); } }
Nach dem Login kopieren
父组件
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); } }
Nach dem Login kopieren
输入属性一定要用中括号[]绑定？
如果绑定的值是静态的，就不需要[]；为了统一风格尽量用上[]
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-item-detail item="static item"></app-item-detail> `, }) export class AppComponent { // currentItem = 'Television'; }
Nach dem Login kopieren
Nach dem Login kopieren
双向绑定（基础，掌握）
先决条件
组件的属性绑定
组件的事件绑定
输入和输出（父子组件通信）
基本的双向绑定
子组件
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); } }
Nach dem Login kopieren
父组件
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; }
Nach dem Login kopieren
双向绑定工作原理
为了使双向数据绑定有效，@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>
Nach dem Login kopieren
表单中的双向绑定
因为没有任何原生 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'; } }
Nach dem Login kopieren
<input [(ngModel)]="name" /> 上面这行代码相当于： <input [value]="name" (input)="name = $event.target.value" />
Nach dem Login kopieren
在表单中的使用
表单中使用[(ngModel)]，需要做下面两件事的其中之一
给控件加上name属性
将ngModelOptions.standalone设为true
<form> <input [(ngModel)]="value" name="name" /> <input [(ngModel)]="value" [ngModelOptions]="{ standalone: true }" /> </form>
Nach dem Login kopieren
注意：表单中使用双向数据绑定，知识点比较多，这里只做简单了解，后续会出专门章节探讨
内置指令
循环指令 *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>
Nach dem Login kopieren
条件渲染 *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>
Nach dem Login kopieren
双向数据绑定指令 [(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" >
Nach dem Login kopieren
模板引用变量
基本使用
使用井号（#）声明模板引用变量，可以获取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); } }
Nach dem Login kopieren
ref
还有种写法就是ref, 下面两种写法是一样的
<input #fax placeholder="fax number" /> <input ref-fax placeholder="fax number" />
Nach dem Login kopieren
引用组件
在组件章节，介绍了获取子组件的属性和方法，有两种方法：本地变量和@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() { } }
Nach dem Login kopieren
输入和输出
输入属性
子组件
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-root', template: `<p> Today's item: {{item}} </p>` }) export class ItemDetailComponent { @Input() item: string; }
Nach dem Login kopieren
Nach dem Login kopieren
父组件
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-item-detail [item]="currentItem"></app-item-detail> `, }) export class AppComponent { currentItem = 'Television'; }
Nach dem Login kopieren
Nach dem Login kopieren
输出属性
子组件
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); } }
Nach dem Login kopieren
父组件
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); } }
Nach dem Login kopieren
在元数据中声明输入和输出属性
固然可以在 @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); } }
Nach dem Login kopieren
父组件
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); } }
Nach dem Login kopieren
输入属性一定要用中括号[]绑定？
如果绑定的值是静态的，就不需要[]
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-item-detail item="static item"></app-item-detail> `, }) export class AppComponent { // currentItem = 'Television'; }
Nach dem Login kopieren
Nach dem Login kopieren
管道（基础，掌握）
常用的管道
1、大小写字母转换
str = 'Hello'; str1 = 'World'; <p>{{str | uppercase}}-{{str1 | lowercase}} </p> //str:hello str1:WORLD
Nach dem Login kopieren
2、日期格式化（经常使用）
today = new Date(); <p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
Nach dem Login kopieren
3、保留小数后面多少位下面例子的含义是，3表示最少几位整数，后面的2-4表示最少最少2位小数，最多4位小数，不足补零，小数会四舍五入。
num = 125.156896; <p>num保留4位小数的值是：{{num | number:'3.2-4'}}</p> //125.1569
Nach dem Login kopieren
4、货币转换
count = 5; price = 1.5; <p>数量：{{count}}</p> // 数据：5 <p>价格：{{price}}</p> // 价格：1.5 <p>总价：{{(price * count) | currency:'￥'}}</p> // 价格：￥7.5
Nach dem Login kopieren
5、字符串截取
name = '只对你说'; <p>{{name | slice : 2 : 4}}</p> // 你说
Nach dem Login kopieren
6、json格式化(有时需要看一下数据)
<p>{{ { name: 'semlinker' } | json }}</p> // { "name": "semlinker" }
Nach dem Login kopieren
自定义管道
1、创建管道文件
ng g pipe /piper/mypiper
Nach dem Login kopieren
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; } }
Nach dem Login kopieren
注意：通过命令行生成的管道（过滤器），会自动在全局声明；管道传入的参数是在'：'冒号后面表示

更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie die Datenbindung für Vorlagen in Angular10 durchgeführt wird.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!