Implémenter la liaison d'attribut DOM dans Angular4-js tutoriel-php.cn

Implémenter la liaison d'attribut DOM dans Angular4

亚连

Libérer： 2018-06-13 16:30:38

original

1596 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur la liaison d'attributs DOM dans le didacticiel d'apprentissage Angular4. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun

<.>Préface

Certains événements déclenchés par des éléments DOM se propagent à travers la hiérarchie DOM. Les événements commencent d'abord par l'élément le plus interne, puis se propagent aux éléments externes jusqu'à ce qu'ils atteignent la racine. élément, ce processus de propagation est appelé bouillonnement d’événements. Cet article présente principalement le contenu pertinent sur la liaison d'attributs Angular4 DOM et le partage pour la référence et l'étude de chacun. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

Introduction

Utiliser des expressions d'interpolation pour afficher la valeur d'une expression sur le modèle

<img src="{{imgUrl}}" alt="">
<h1>{{productTitle}}</h1>

Copier après la connexion

Utilisation de la liaison entre parenthèses une valeur d'attribut d'une balise HTML à une expression

<img [src]="imgUrl" alt="">

Copier après la connexion

Utilisez des parenthèses pour lier une méthode du contrôleur de composant à un gestionnaire d'événements sur le modèle

<button (click)="onClickButton($event)">按钮绑定事件</button>

Copier après la connexion

Remarque

Avant de commencer l'exemple ci-dessous, assurez-vous d'avoir créé un nouveau projet. Sinon, veuillez consulter : Notes d'étude Angular2 - Tutoriel d'installation et d'utilisation de la CLI angulaire

Liaison d'événements

Préparation

Comprendre le but : ajouter un bouton à l'interface du modèle, puis lier un événement entre parenthèses.

Créez un nouveau composant de liaison et utilisez la commande : ng g c bind

Modifiez bind.component.html


<button (click)="onClickButton($event)">按钮绑定事件</button>

Copier après la connexion

Modifiez bind.component.ts

//在 BindComponent 类方法中增加方法体
onClickButton(event: any){
 console.log(event);
}

Copier après la connexion

Modifier app.component.html

<!-- 增加 app-bind 组件 -->
<app-bind></app-bind>

Copier après la connexion

Image :

Liaison d'attribut Dom

Exemple 1

La relation entre l'expression d'interpolation et la liaison d'attribut

Les deux méthodes peuvent être implémentées, et angulaire l'implémente La logique est : Lorsque le programme charge le composant, il traduira d'abord « l'expression d'interpolation » en « liaison de propriété »

Modifier bind.component.html



<img [src]="imgUrl" alt="">

Copier après la connexion

Modifier la liaison composant.ts<. 🎜>

Illustration :

//增加变量
imgUrl: string = http://placehold.it/320x280;

Copier après la connexion

Exemple 2

attribut dom et attribut html Différence

Il existe une différence partielle entre les attributs DOM et les attributs HTML des éléments HTML, et cette différence doit être clarifiée.

Modifier bind.component.html

Modifier bind.component.ts

<!-- 增加代码 -->
<p>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</p>

Copier après la connexion

Image :

//增加 event事件
onInputEvent(event: any){
 //获取的是 dom 属性，即输入属性
 console.log(event.target.value);
 //获取的是 html 属性，也就是初始化的属性
 console.log(event.target.getAttribute("value"));
}

Copier après la connexion

Résumé :

1. Il existe une relation de mappage 1:1 entre un petit nombre d'attributs HTML et les attributs DOM, tels que : id

2. Certains Il y a des attributs HTML mais pas d'attributs DOM, comme : colspan

3. Certains ont des attributs DOM mais pas d'attributs HTML, comme : textContent

4. Même si les noms sont les mêmes , les attributs DOM et les attributs HTML sont obtenus. Le contenu peut être différent

5. La liaison du modèle est liée via les attributs DOM, pas via les attributs HTML

6. Les attributs HTML spécifient la valeur initiale, et Les attributs DOM représentent la valeur actuelle ; DOM La valeur de l'attribut peut être modifiée, mais la valeur du HTML ne peut pas être modifiée

Code complet de la partie exemplebind.component.html

bind.component.ts


 bind works!

<button (click)="onClickButton($event)">按钮绑定事件</button>

 
 <img [src]="imgUrl" alt="">

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. à l'avenir.

import { Component, OnInit } from &#39;@angular/core&#39;;
@Component({
 selector: &#39;app-bind&#39;,
 templateUrl: &#39;./bind.component.html&#39;,
 styleUrls: [&#39;./bind.component.css&#39;]
})
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"));
 }
}

Copier après la connexion