您好,登錄后才能下訂單哦!
前言
DOM 元素觸發(fā)的一些事件通過 DOM 層級(jí)結(jié)構(gòu)傳播,事件首先由最內(nèi)層的元素開始,然后傳播到外部元素,直到它們到根元素,這種傳播過程稱為事件冒泡。本文主要介紹了關(guān)于Angular4 DOM屬性綁定的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧。
簡(jiǎn)介
使用插值表達(dá)式將一個(gè)表達(dá)式的值顯示在模版上
<img src="{{imgUrl}}" alt=""> <h2>{{productTitle}}</h2>
使用方括號(hào)將HTML標(biāo)簽的一個(gè)屬性值綁定到一個(gè)表達(dá)式上
<img [src]="imgUrl" alt="">
使用小括號(hào)將組件控制器的一個(gè)方法綁定到模版上面的一個(gè)事件的處理器上
<button (click)="onClickButton($event)">按鈕綁定事件</button>
注意
在開始下面的例子之前,請(qǐng)先確認(rèn)已經(jīng)新建了一個(gè)工程。如果沒有,請(qǐng)查看:Angular2學(xué)習(xí)筆記之Angular CLI 安裝和使用教程
事件綁定
準(zhǔn)備工作
了解目的:在模版的界面上面增加一個(gè)按鈕,然后通過小括號(hào)綁定一個(gè)事件。
新建一個(gè) bind 組件,使用命令: ng g c bind
修改 bind.component.html
<!-- 界面增加代碼 --> <button (click)="onClickButton($event)">按鈕綁定事件</button>
修改 bind.component.ts
//在 BindComponent 類方法中增加方法體 onClickButton(event: any){ console.log(event); }
修改 app.component.html
<!-- 增加 app-bind 組件 --> <app-bind></app-bind>
圖示:
Dom屬性綁定
例子一
插值表達(dá)式 與 屬性綁定 之間的關(guān)系
兩種方式都可以實(shí)現(xiàn),angular 在實(shí)現(xiàn)的邏輯上面是: 在程序加載組件的時(shí)候,會(huì)先將 "插值表達(dá)式" 翻譯為 "屬性綁定"
修改 bind.component.html
<!-- 界面增加代碼 --> <!-- 屬性綁定 --> <img [src]="imgUrl" alt=""> <!-- 插值表達(dá)式綁定 --> <img src="{{imgUrl}}" alt="">
修改 bind.component.ts
//增加變量 imgUrl: string = http://placehold.it/320x280;
圖示:
例子二
dom 屬性 與 html 屬性的區(qū)別
HTML元素的 DOM屬性和 HTML 屬性是有部分區(qū)別的,這點(diǎn)需要明確差異。
修改 bind.component.html
<!-- 增加代碼 --> <div> <input type="text" value="Tom" (input)="onInputEvent($event)"> </div>
修改 bind.component.ts
//增加 event事件 onInputEvent(event: any){ //獲取的是 dom 屬性,即輸入屬性 console.log(event.target.value); //獲取的是 html 屬性,也就是初始化的屬性 console.log(event.target.getAttribute("value")); }
圖示:
小結(jié):
1.少量的 HTML屬性和 DOM屬性之間有這 1 :1 的映射關(guān)系,如 :id
2.有些有 HTML屬性,沒有DOM 屬性, 如:colspan
3.有些有 DOM屬性,沒有HTML 屬性,如:textContent
4.就算名字一樣,DOM屬性和HTML屬性獲取的內(nèi)容可能不一樣
5.模版綁定是通過DOM屬性綁定的,而不是通過HTML屬性
6.HTML屬性指定了初始值,DOM屬性表示當(dāng)前值;DOM屬性的值可以改變,HTML的值不能改變
例子部分完整代碼
bind.component.html
<p> bind works! </p> <button (click)="onClickButton($event)">按鈕綁定事件</button> <div> <!-- 屬性綁定 --> <img [src]="imgUrl" alt=""> <!-- 插值表達(dá)式綁定 --> <img src="{{imgUrl}}" alt=""> </div> <div> <input type="text" value="Tom" (input)="onInputEvent($event)"> </div>
bind.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-bind', templateUrl: './bind.component.html', styleUrls: ['./bind.component.css'] }) export class BindComponent implements OnInit { imgUrl: string = "http://placehold.it/320x280"; constructor() { } ngOnInit() { } onClickButton(event: any){ console.log(event); } onInputEvent(event: any){ //獲取的是 dom 屬性,即輸入屬性 console.log(event.target.value); //獲取的是 html 屬性,也就是初始化的屬性 console.log(event.target.getAttribute("value")); } }
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。