真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

angular10中怎么利用模板進行數(shù)據(jù)綁定

今天就跟大家聊聊有關(guān)angular10中怎么利用模板進行數(shù)據(jù)綁定，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、鞏留網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術(shù)、商城開發(fā)、集團公司官網(wǎng)建設、外貿(mào)營銷網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為鞏留等各大城市提供網(wǎng)站開發(fā)制作服務。

綁定語法概覽

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

  • model => view (單向：插值、屬性綁定、樣式綁定)

  • view  => model(單向：事件綁定)

  • view <=> model（雙向：ngModule）

【相關(guān)教程推薦：《angular教程》】


{{expression}}
[target]="expression"
bind-target="expression"


 {{ msg }} 
  // 插值表達式
 // 屬性綁定
 // 組件通過屬性綁定的方式傳參
 // 樣式綁定 Special
 // class綁定  // style綁定 help // Attribute綁定 (target)="statement" on-target="statement" Save // 元素事件  // 組件事件，用于監(jiān)聽子組件傳遞過來的參數(shù) click me
 // 指令事件 [(target)]="expression" bindon-target="expression"  // 雙向數(shù)據(jù)綁定

HTML attribute 與 DOM property 的對比（很重要，加強理解）

理解 HTML 屬性和 DOM 屬性之間的區(qū)別，是了解 Angular 綁定如何工作的關(guān)鍵。Attribute 是由 HTML 定義的。Property 是從 DOM（文檔對象模型）節(jié)點訪問的

重要的是要記住，HTML Attribute 和 DOM Property 是不同的，就算它們具有相同的名稱也是如此。 在 Angular 中，HTML Attribute 的唯一作用是初始化元素和指令的狀態(tài)。

模板綁定使用的是 Property 和事件，而不是 Attribute。

編寫數(shù)據(jù)綁定時，你只是在和目標對象的 DOM Property 和事件打交道。

注意：

該通用規(guī)則可以幫助你建立 HTML Attribute 和 DOM Property 的思維模型： 屬性負責初始化 DOM 屬性，然后完工。Property 值可以改變；Attribute 值則不能。

此規(guī)則有一個例外。 可以通過 setAttribute() 來更改 Attribute，接著它會重新初始化相應的 DOM 屬性。

案例1：input

當瀏覽器渲染input時，它會創(chuàng)建一個對應的 DOM 節(jié)點，其 value Property 已初始化為 “Sarah”。

當用戶在 input 中輸入 Sally 時，DOM 元素的 value Property 將變?yōu)?Sally。 但是，如果使用 input.getAttribute('value')查看 HTML 的 Attribute value，則可以看到該 attribute 保持不變—— 它返回了 Sarah。

HTML 的 value 這個 attribute 指定了初始值；DOM 的 value 就是這個 property 是當前值。

案例2：禁用按鈕

disabled Attribute 是另一個例子。按鈕的 disabled Property 默認為 false，因此按鈕是啟用的。

當你添加 disabled Attribute 時，僅僅它的出現(xiàn)就將按鈕的 disabled Property 初始化成了 true，因此該按鈕就被禁用了。

Test Button

添加和刪除 disabled Attribute 會禁用和啟用該按鈕。 但是，Attribute 的值無關(guān)緊要，這就是為什么你不能通過編寫 仍被禁用 來啟用此按鈕的原因。

要控制按鈕的狀態(tài)，請設置 disabled Property，

模板/插值表達式 {{}} （基礎(chǔ)，掌握）

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      
變量綁定：{{ title }}

      
方法綁定：{{ getVal }}

      
方法綁定：{{ getVal2() }}

      
簡單運算 {{ 1 + 1 }}.

      
簡單運算 {{ price * 0.7 }}.

      
簡單運算：{{ gender === 0 ? '男':'女' }}

      
與方法結(jié)合 {{ price * 0.7 + getVal }}.

      
與方法結(jié)合 {{ price * 0.7 + getVal2() }}.

  `,
})
export class AppComponent {
  title = "模板綁定"；
  price = 30;
  gender = 0;
  get getVal(): number { //es6新語法,函數(shù)可以當做變量來使用
    return 20;
  }
  getVal2(): number {
    return 33;
  }
}

當使用模板表達式時，請遵循下列指南：

屬性綁定（基礎(chǔ)，掌握）

綁定圖片

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
     // 推薦
    
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
}

綁定普通屬性

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
    
      
        name
        phone
        age
      
      
        張三
        13398490594
        33
      
      
        李四 // 注意colSpan和colspan
        15079049984
        22
      
    
    click
    `,
  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: `
    一行文字
    test title
    test title
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
  customTitle = 'bbb';
}

使用插值表達式（不推薦）

插值也可以用于屬性，但常規(guī)做法還是用中括號[]，建議整個項目保持風格統(tǒng)一

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
  user = {
    name: 'madao',
    pic: this.madaoSrc
  };
}

樣式綁定（屬于屬性綁定，基礎(chǔ)，掌握）

綁定單個樣式

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      Primary
      secondary
      success
      danger
      danger   //false
      danger  //false
    `,
  styles: []
})
export class AppComponent {
    theme = 'primary';
    isSuccess = true;
}

綁定多個class

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      btnCls
      btnCls2
      btnCls3

      
      btnCls
      btnCls2
      btnCls3
    `,
  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: `
      一段文字

      設置高度

      設置高度

    `,
  styles: []
})
export class AppComponent {}

綁定多個style

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      style1

      style2

      style3

      
      
      

      
      style3

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

綁定優(yōu)先級

事件綁定（基礎(chǔ)，掌握）

基本用法

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      Primary
    `,
  styles: []
})
export class AppComponent {
    onClick() {
      console.log('onClick');
    } 
}

事件對象

$event 就是原生的事件對象

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      Primary
    `,
  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: `
      
      
       //可以在html使用一些簡單的語法
    
    `,
  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: `

               Today's item: {{item}}
             
`
})
export class ItemDetailComponent  {
  @Input() item: string;
}

父組件

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

輸出屬性

子組件

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
             Add to parent's list`,
})
export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter(); //子傳父，輸出屬性
  addNewItem(value: string) {
    this.newItemEvent.emit(value); //自定義事件觸發(fā)
  }
}

父組件

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      //監(jiān)聽自定義事件
  `,
})
export class AppComponent {
   items = ['item1', 'item2', 'item3', 'item4'];
    addItem(newItem: string) {
      this.items.push(newItem);
    }
}

在元數(shù)據(jù)中聲明輸入和輸出屬性

固然可以在 @Directive 和 @Component 元數(shù)據(jù)中聲明 inputs 和 outputs,但不推薦提供別名

@Input()和@Output()可以接收一個參數(shù)，作為變量的別名，那么父組件中只能用別名綁定

子組件

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `

               Today's item: {{item}}
             
`
})
export class ItemDetailComponent  {
  @Input('aliasItem') item: string; 
  @Output('newItem') newItemEvent = new EventEmitter();
  
  addNewItem(value: string) {
     this.newItemEvent.emit(value);
   }
}

父組件

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      //注意是監(jiān)聽的別名
  `,
})
export class AppComponent {
  currentItem = 'Television';
  items = ['item1', 'item2', 'item3', 'item4'];
  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

輸入屬性一定要用中括號[]綁定？

如果綁定的值是靜態(tài)的，就不需要[]；為了統(tǒng)一風格盡量用上[]

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

雙向綁定（基礎(chǔ)，掌握）

先決條件

基本的雙向綁定

子組件

import {Component, OnInit, ChangeDetectionStrategy, EventEmitter, Input, Output} from '@angular/core';@Component({  selector: 'app-sizer',  template: `
    

      -
      +
      FontSize: {{size}}px
    

  `,  styles: [
  ],  changeDetection: ChangeDetectionStrategy.OnPush
})export class SizerComponent implements OnInit {  @Input()  size: number | string;  
  // 想要用雙向綁定語法，output變量名就一定是輸入屬性名加上Change  @Output() sizeChange = new EventEmitter();  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: `
     
     Resizable Text
  `,
})export class AppComponent {
    fontSizePx = 16;
}

雙向綁定工作原理

為了使雙向數(shù)據(jù)綁定有效，@Output() 屬性的名字必須遵循 inputChange 模式，其中 input 是相應 @Input() 屬性的名字。例如，如果 @Input() 屬性為 size ，則 @Output() 屬性必須為 sizeChange 。

上面的 sizerComponent 具有值屬性 size 和事件屬性 sizeChange。 size 屬性是 @Input()，因此數(shù)據(jù)可以流入 sizerComponent 。 sizeChange 事件是一個 @Output() ，它允許數(shù)據(jù)從 sizerComponent 流出到父組件。

上面例子，有兩個方法， dec() 用于減小字體大小， inc() 用于增大字體大小。這兩種方法使用 resize() 在最小/最大值的約束內(nèi)更改 size 屬性的值，并發(fā)出帶有新 size 值的事件。

簡寫形式

雙向綁定語法是屬性綁定和事件綁定的組合的簡寫形式

表單中的雙向綁定

因為沒有任何原生 HTML 元素遵循了 x 值和 xChange 事件的命名模式，所以與表單元素進行雙向綁定需要使用 NgModel

基本使用

根據(jù)之前基本的雙向綁定知識，[(ngModel)]語法可拆解為：

使用[(ngModule)]雙向綁定的前提條件是在模塊中引入FormsModule

import {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    
    
    
Value: {{ name }}

    
Valid: {{ ctrl.valid }}

    
    Set value
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() {
    this.name = 'Nancy';
  }
}

上面這行代碼相當于：

在表單中的使用

表單中使用[(ngModel)]，需要做下面兩件事的其中之一


    
    

注意：表單中使用雙向數(shù)據(jù)綁定，知識點比較多，這里只做簡單了解，后續(xù)會出專門章節(jié)探討

內(nèi)置指令

循環(huán)指令 *ngFor （非?；A(chǔ)，掌握）

arr:string[] = ['張三','李四','王五']; 
trackByItems(index: number, item: Item): number { return item.id; }


   索引值：{{i}} -- 內(nèi)容：{{item}}


//trackBy一般和長列表一起使用，減少dom替換次數(shù)，提升性能

  ({{item.id}}) {{item.name}}

條件渲染 *ngIf ngStyle  ngClass  ngSwitch（非常基礎(chǔ)）

isShow: Boolean = true;
personState: number = 2;

//頻繁切換不建議用，頻繁加載和移除有較高的性能消耗 （重要）
命令模式
 // 不頻繁切換推薦用
命令模式
 // 頻繁切換推薦用


currentStyles = {
      'font-style':  this.canSave      ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
      'font-size':   this.isSpecial    ? '24px'   : '12px'
};
ngClass

  ngStyle


// 使用樣式有2種（style.dispaly 和 class.hidden）
style模式
 //頻繁切換建議用樣式
class模式



//匹配多種情況的條件渲染，跟vue的v-if/v-else-if/v-else類似
//適合多種狀態(tài)，顯示一種的情況

    工作
    吃飯
    睡覺

雙向數(shù)據(jù)綁定指令 [(ngModel)]

//Angular不能直接識別ngModel，需要通過引入模塊FormsModule來訪問
import {FormsModule} from '@angular/forms';
imports: [FormsModule]

public name = "張三";
 //人工綁定，更好的做法是通過響應式表單綁定
 //備選

//屬性綁定+事件綁定 = ngModel （重要）

模板引用變量

基本使用

使用井號（#）聲明模板引用變量，可以獲取DOM 元素、指令、組件、TemplateRef 或 Web Component。

import {Component} from '@angular/core';
@Component({
  selector: 'app-tpl-var',
  template: `
    
    Call
  `,
})
export class TplVarComponent {
  constructor() { }
  callPhone(value: string) {
    console.log('callPhone', value);
  }
}

ref

還有種寫法就是ref, 下面兩種寫法是一樣的

引用組件

在組件章節(jié)，介紹了獲取子組件的屬性和方法，有兩種方法：本地變量和@viewChild()

import {Component} from '@angular/core';
@Component({
  selector: 'app-tpl-var',
  template: `
    
      app inc
      
      size: {{ size }}
    
  `,
})
export class TplVarComponent {
  size = 16;
  constructor() { }
}

輸入和輸出

輸入屬性

子組件

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `

               Today's item: {{item}}
             
`
})
export class ItemDetailComponent  {
  @Input() item: string;
}

父組件

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

輸出屬性

子組件

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
             Add to parent's list`,
})
export class ItemOutputComponent {
  @Output() newItemEvent = new EventEmitter();
  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

父組件

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
     
  `,
})
export class AppComponent {
   items = ['item1', 'item2', 'item3', 'item4'];
    addItem(newItem: string) {
      this.items.push(newItem);
    }
}

在元數(shù)據(jù)中聲明輸入和輸出屬性

固然可以在 @Directive 和 @Component 元數(shù)據(jù)中聲明 inputs 和 outputs, 不推薦提供別名。

@Input()和@Output()可以接收一個參數(shù)，作為變量的別名，那么父組件中只能用別名綁定 子組件

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `

               Today's item: {{item}}
             
`
})
export class ItemDetailComponent  {
  @Input('aliasItem') item: string; // decorate the property with @Input()
  @Output('newItem') newItemEvent = new EventEmitter();
  addNewItem(value: string) {
     this.newItemEvent.emit(value);
   }
}

父組件

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
     
  `,
})
export class AppComponent {
  currentItem = 'Television';
  items = ['item1', 'item2', 'item3', 'item4'];
  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

輸入屬性一定要用中括號[]綁定？

如果綁定的值是靜態(tài)的，就不需要[]

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

管道（基礎(chǔ)，掌握）

常用的管道

1、大小寫字母轉(zhuǎn)換

str = 'Hello';
str1 = 'World';

{{str | uppercase}}-{{str1 | lowercase}} 
  //str:hello str1:WORLD

2、 日期格式化（經(jīng)常使用）

today = new Date();


現(xiàn)在的時間是{{today | date:'yyyy-MM-dd HH:mm:ss'}}

3、保留小數(shù)后面多少位 下面例子的含義是，3表示最少幾位整數(shù)，后面的2-4表示最少最少2位小數(shù)，最多4位小數(shù)，不足補零，小數(shù)會四舍五入。

num = 125.156896;


num保留4位小數(shù)的值是：{{num | number:'3.2-4'}}
 //125.1569

4、貨幣轉(zhuǎn)換

count = 5;
price = 1.5;


數(shù)量：{{count}}
 // 數(shù)據(jù)：5

價格：{{price}}
 // 價格：1.5

總價：{{(price * count) | currency:'￥'}}
 // 價格：￥7.5

5、字符串截取

name = '只對你說';


{{name | slice : 2 : 4}}
 // 你說

6、json格式化(有時需要看一下數(shù)據(jù))

 
{{ { name: 'semlinker' } | json }}
 // { "name": "semlinker" }

自定義管道

1、創(chuàng)建管道文件

ng g pipe /piper/mypiper

2、在管道文件中寫自己的邏輯transform兩個參數(shù)分別表示傳入值和參數(shù)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiple'
})
export class MypiperPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    //value:輸入值 args:參數(shù)
    if(!args){//無參的情況下
      args = 1;
    }
    return value*args;
  }
}

注意：通過命令行生成的管道（過濾器），會自動在全局聲明； 管道傳入的參數(shù)是在'：'冒號后面表示

看完上述內(nèi)容，你們對angular10中怎么利用模板進行數(shù)據(jù)綁定有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。


網(wǎng)站欄目：angular10中怎么利用模板進行數(shù)據(jù)綁定
瀏覽路徑：http://weahome.cn/article/jdpopd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部