您的位置是:网站首页>Javascript编程Javascript编程

聊聊angular10中模板如何进行数据绑定?

少儿编程网2022-01-06 17:13:44Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介本篇文章给大家介绍一下angular10模板的数据绑定,带大家了解一下三种绑定语法、模板/插值表达式、属性绑定、样式绑定、事件绑定、双向绑定、内置指令、模板引用变量等等。绑定语法概览绑定语法归纳起来大概有三种(基础)model=>view(单向:插值、属性绑定、样式绑定)view=>mo

本篇文章给大家介绍一下angular10模板的数据绑定,带大家了解一下三种绑定语法、模板/插值表达式、属性绑定、样式绑定、事件绑定、双向绑定、内置指令、模板引用变量等等。bL3少儿编程网-https://www.pxcodes.com

bL3少儿编程网-https://www.pxcodes.com

绑定语法概览

绑定语法归纳起来大概有三种(基础)bL3少儿编程网-https://www.pxcodes.com

  • model => view (单向:插值、属性绑定、样式绑定)
  • view => model(单向:事件绑定)
  • view <=> model(双向:ngModule)

【相关教程推荐:《angular教程》】bL3少儿编程网-https://www.pxcodes.com

<!-- 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 的对比(很重要,加强理解)bL3少儿编程网-https://www.pxcodes.com

理解 HTML 属性和 DOM 属性之间的区别,是了解 Angular 绑定如何工作的关键。Attribute 是由 HTML 定义的。Property 是从 DOM(文档对象模型)节点访问的bL3少儿编程网-https://www.pxcodes.com

  • 一些 HTML Attribute 可以 1:1 映射到 Property;例如,“ id”。
  • 某些 HTML Attribute 没有相应的 Property。例如,aria-* colSpan rowSpan。
  • 某些 DOM Property 没有相应的 Attribute。例如,textContent。

重要的是要记住,HTML Attribute 和 DOM Property 是不同的,就算它们具有相同的名称也是如此。 在 Angular 中,HTML Attribute 的**作用是初始化元素和指令的状态。bL3少儿编程网-https://www.pxcodes.com

模板绑定使用的是 Property 和事件,而不是 Attribute。bL3少儿编程网-https://www.pxcodes.com

编写数据绑定时,你只是在和目标对象的 DOM Property 和事件打交道。bL3少儿编程网-https://www.pxcodes.com

注意:bL3少儿编程网-https://www.pxcodes.com

该通用规则可以帮助你建立 HTML Attribute 和 DOM Property 的思维模型: 属性负责初始化 DOM 属性,然后完工。Property 值可以改变;Attribute 值则不能。bL3少儿编程网-https://www.pxcodes.com

此规则有一个例外。 可以通过 setAttribute() 来更改 Attribute,接着它会重新初始化相应的 DOM 属性。bL3少儿编程网-https://www.pxcodes.com

案例1:inputbL3少儿编程网-https://www.pxcodes.com

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

当浏览器渲染input时,它会创建一个对应的 DOM 节点,其 value Property 已初始化为 “Sarah”。bL3少儿编程网-https://www.pxcodes.com

当用户在 input 中输入 Sally 时,DOM 元素的 value Property 将变为 Sally。 但是,如果使用 input.getAttribute('value') 查看 HTML 的 Attribute value,则可以看到该 attribute 保持不变 —— 它返回了 Sarah。bL3少儿编程网-https://www.pxcodes.com

HTML 的 value 这个 attribute 指定了初始值;DOM 的 value 就是这个 property 是当前值。bL3少儿编程网-https://www.pxcodes.com

案例2:禁用按钮bL3少儿编程网-https://www.pxcodes.com

disabled Attribute 是另一个例子。按钮的 disabled Property 默认为 false,因此按钮是启用的。bL3少儿编程网-https://www.pxcodes.com

当你添加 disabled Attribute 时,仅仅它的出现就将按钮的 disabled Property 初始化成了 true,因此该按钮就被禁用了。bL3少儿编程网-https://www.pxcodes.com

<button disabled>Test Button</button>

添加和删除 disabled Attribute 会禁用和启用该按钮。 但是,Attribute 的值无关紧要,这就是为什么你不能通过编写 仍被禁用 来启用此按钮的原因。bL3少儿编程网-https://www.pxcodes.com

要控制按钮的状态,请设置 disabled Property,bL3少儿编程网-https://www.pxcodes.com

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null"> 

模板/插值表达式 {{}} (基础,掌握)

模版中除了绑定变量,还能绑定方法bL3少儿编程网-https://www.pxcodes.com

模版中还可以写些简单的逻辑,比如判断或运算bL3少儿编程网-https://www.pxcodes.com

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

当使用模板表达式时,请遵循下列指南:bL3少儿编程网-https://www.pxcodes.com

  • 非常简单
  • 执行迅速
  • 没有可见的副作用(即模版中的逻辑不能改变组件的变量)

属性绑定(基础,掌握)

绑定图片bL3少儿编程网-https://www.pxcodes.com

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

绑定普通属性bL3少儿编程网-https://www.pxcodes.com

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

绑定自定义属性bL3少儿编程网-https://www.pxcodes.com

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

使用插值表达式(不推荐)bL3少儿编程网-https://www.pxcodes.com

插值也可以用于属性,但常规做法还是用中括号[],建议整个项目保持风格统一bL3少儿编程网-https://www.pxcodes.com

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

样式绑定(属于属性绑定,基础,掌握)

绑定单个样式bL3少儿编程网-https://www.pxcodes.com

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

绑定多个classbL3少儿编程网-https://www.pxcodes.com

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

绑定单个stylebL3少儿编程网-https://www.pxcodes.com

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

绑定多个stylebL3少儿编程网-https://www.pxcodes.com

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

绑定优先级bL3少儿编程网-https://www.pxcodes.com

  • 某个类或样式绑定越具体,它的优先级就越高
  • 绑定总是优先于静态属性

事件绑定(基础,掌握)

基本用法bL3少儿编程网-https://www.pxcodes.com

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

事件对象bL3少儿编程网-https://www.pxcodes.com

$event 就是原生的事件对象bL3少儿编程网-https://www.pxcodes.com

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

事件捕获或事件冒泡bL3少儿编程网-https://www.pxcodes.com

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

输入输出属性(主要是子传父,通过自定义事件)bL3少儿编程网-https://www.pxcodes.com

输入属性bL3少儿编程网-https://www.pxcodes.com

子组件bL3少儿编程网-https://www.pxcodes.com

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

父组件bL3少儿编程网-https://www.pxcodes.com

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

输出属性bL3少儿编程网-https://www.pxcodes.com

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

子组件bL3少儿编程网-https://www.pxcodes.com

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); //自定义事件触发
  }
}

父组件bL3少儿编程网-https://www.pxcodes.com

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

在元数据中声明输入和输出属性bL3少儿编程网-https://www.pxcodes.com

固然可以在 @Directive 和 @Component 元数据中声明 inputs 和 outputs,但不推荐提供别名bL3少儿编程网-https://www.pxcodes.com

@Input()和@Output()可以接收一个参数,作为变量的别名,那么父组件中只能用别名绑定bL3少儿编程网-https://www.pxcodes.com

子组件bL3少儿编程网-https://www.pxcodes.com

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

父组件bL3少儿编程网-https://www.pxcodes.com

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

输入属性一定要用中括号[]绑定?bL3少儿编程网-https://www.pxcodes.com

如果绑定的值是静态的,就不需要[];为了统一风格尽量用上[]bL3少儿编程网-https://www.pxcodes.com

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

双向绑定(基础,掌握)

先决条件bL3少儿编程网-https://www.pxcodes.com

  • 组件的属性绑定
  • 组件的事件绑定
  • 输入和输出(父子组件通信)

基本的双向绑定bL3少儿编程网-https://www.pxcodes.com

子组件bL3少儿编程网-https://www.pxcodes.com

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

父组件bL3少儿编程网-https://www.pxcodes.com

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

双向绑定工作原理bL3少儿编程网-https://www.pxcodes.com

为了使双向数据绑定有效,@Output() 属性的名字必须遵循 inputChange 模式,其中 input 是相应 @Input() 属性的名字。例如,如果 @Input() 属性为 size ,则 @Output() 属性必须为 sizeChange 。bL3少儿编程网-https://www.pxcodes.com

上面的 sizerComponent 具有值属性 size 和事件属性 sizeChange。 size 属性是 @Input(),因此数据可以流入 sizerComponent 。 sizeChange 事件是一个 @Output() ,它允许数据从 sizerComponent 流出到父组件。bL3少儿编程网-https://www.pxcodes.com

上面例子,有两个方法, dec() 用于减小字体大小, inc() 用于增大字体大小。这两种方法使用 resize() 在**小/**大值的约束内更改 size 属性的值,并发出带有新 size 值的事件。bL3少儿编程网-https://www.pxcodes.com

简写形式bL3少儿编程网-https://www.pxcodes.com

双向绑定语法是属性绑定和事件绑定的组合的简写形式bL3少儿编程网-https://www.pxcodes.com

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

表单中的双向绑定bL3少儿编程网-https://www.pxcodes.com

因为没有任何原生 HTML 元素遵循了 x 值和 xChange 事件的命名模式,所以与表单元素进行双向绑定需要使用 NgModelbL3少儿编程网-https://www.pxcodes.com

基本使用bL3少儿编程网-https://www.pxcodes.com

根据之前基本的双向绑定知识,[(ngModel)]语法可拆解为:bL3少儿编程网-https://www.pxcodes.com

  • 名为ngModel的输入属性
  • 名为ngModelChange的输出属性

使用[(ngModule)]双向绑定的前提条件是在模块中引入FormsModulebL3少儿编程网-https://www.pxcodes.com

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" />

在表单中的使用bL3少儿编程网-https://www.pxcodes.com

表单中使用[(ngModel)],需要做下面两件事的其中之一bL3少儿编程网-https://www.pxcodes.com

  • 给控件加上name属性
  • 将ngModelOptions.standalone设为true
<form>
    <input [(ngModel)]="value" name="name" />
    <input [(ngModel)]="value" [ngModelOptions]="{ standalone: true }" />
</form>

注意:表单中使用双向数据绑定,知识点比较多,这里只做简单了解,后续会出专门章节探讨bL3少儿编程网-https://www.pxcodes.com

内置指令

循环指令 *ngFor (非常基础,掌握)bL3少儿编程网-https://www.pxcodes.com

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(非常基础)bL3少儿编程网-https://www.pxcodes.com

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)]bL3少儿编程网-https://www.pxcodes.com

//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" >

模板引用变量

基本使用bL3少儿编程网-https://www.pxcodes.com

使用井号(#)声明模板引用变量,可以获取DOM 元素、指令、组件、TemplateRef 或 Web Component。bL3少儿编程网-https://www.pxcodes.com

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

refbL3少儿编程网-https://www.pxcodes.com

还有种写法就是ref, 下面两种写法是一样的bL3少儿编程网-https://www.pxcodes.com

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

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

引用组件bL3少儿编程网-https://www.pxcodes.com

在组件章节,介绍了获取子组件的属性和方法,有两种方法:本地变量和@viewChild()bL3少儿编程网-https://www.pxcodes.com

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

输入和输出

输入属性bL3少儿编程网-https://www.pxcodes.com

子组件bL3少儿编程网-https://www.pxcodes.com

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

父组件bL3少儿编程网-https://www.pxcodes.com

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

输出属性bL3少儿编程网-https://www.pxcodes.com

子组件bL3少儿编程网-https://www.pxcodes.com

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

父组件bL3少儿编程网-https://www.pxcodes.com

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

在元数据中声明输入和输出属性bL3少儿编程网-https://www.pxcodes.com

固然可以在 @Directive 和 @Component 元数据中声明 inputs 和 outputs, 不推荐提供别名。bL3少儿编程网-https://www.pxcodes.com

@Input()和@Output()可以接收一个参数,作为变量的别名,那么父组件中只能用别名绑定 子组件bL3少儿编程网-https://www.pxcodes.com

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

父组件bL3少儿编程网-https://www.pxcodes.com

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

输入属性一定要用中括号[]绑定?bL3少儿编程网-https://www.pxcodes.com

如果绑定的值是静态的,就不需要[]bL3少儿编程网-https://www.pxcodes.com

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

管道(基础,掌握)

常用的管道bL3少儿编程网-https://www.pxcodes.com

1、大小写字母转换bL3少儿编程网-https://www.pxcodes.com

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

2、 日期格式化(经常使用)bL3少儿编程网-https://www.pxcodes.com

today = new Date();

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

3、保留小数后面多少位 下面例子的含义是,3表示**少几位整数,后面的2-4表示**少**少2位小数,**多4位小数,不足补零,小数会四舍五入。bL3少儿编程网-https://www.pxcodes.com

num = 125.156896;

<p>num保留4位小数的值是:{{num | number:'3.2-4'}}</p> //125.1569

4、货币转换bL3少儿编程网-https://www.pxcodes.com

count = 5;
price = 1.5;

<p>数量:{{count}}</p> // 数据:5
<p>价格:{{price}}</p> // 价格:1.5
<p>总价:{{(price * count) | currency:'¥'}}</p> // 价格:¥7.5

5、字符串截取bL3少儿编程网-https://www.pxcodes.com

name = '只对你说';

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

6、json格式化(有时需要看一下数据)bL3少儿编程网-https://www.pxcodes.com

 <p>{{ { name: 'semlinker' } | json }}</p> // { "name": "semlinker" }

自定义管道bL3少儿编程网-https://www.pxcodes.com

1、创建管道文件bL3少儿编程网-https://www.pxcodes.com

ng g pipe /piper/mypiper

2、在管道文件中写自己的逻辑transform两个参数分别表示传入值和参数bL3少儿编程网-https://www.pxcodes.com

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

注意:通过命令行生成的管道(过滤器),会自动在全局声明; 管道传入的参数是在':'冒号后面表示bL3少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程视频!!

以上就是聊聊angular10中模板如何进行数据绑定?的详细内容,更多请关注少儿编程网其它相关文章!bL3少儿编程网-https://www.pxcodes.com

来源:php中文网bL3少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

聊聊angular10中模板如何进行数据绑定?

      匿名评论
    • 评论
    人参与,条评论
    聊聊angular10中模板如何进行数据绑定?

微信公众号

免费视频教程

先知道