Comment implémenter la liaison d'attribut HTML dans Angular4

Cet article vous présente principalement les informations pertinentes sur la liaison d'attributs HTML 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

Avant-propos

Cet article vous présente principalement le contenu pertinent sur la liaison d'attributs HTML Angular4, et le partage pour votre référence et votre étude. Je n'en dirai pas beaucoup plus ci-dessous. Jetons un coup d'œil à l'introduction détaillée.

Introduction

Propriétés HTML de base

<td [attr.colspan]="tableColspan"></td>

Liaison de classe CSS

<!-- 第一种情况 class 类全部替换 -->
<p [class]="pClass">CSS 类绑定，[class] 全部替换的例子</p>
<!-- 第二种情况 替换 class 类的部分属性 --> 
<p [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</p> 
<!-- 第三种情况 根据表达式显示部分 class 属性-->
<p [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</p>

Style liaison d'attribut

 <!-- 替换部分的 Style -->
 <button [style.color]="isSpecial ? &#39;red&#39; : &#39;green&#39;" ]>Red</button> 
 <!-- 替换所有的样式 -->
 <button [ngStyle]="{&#39;font-style&#39;:this.canSave? &#39;italic&#39; : &#39;normal&#39;}" ]>Red</button>

Liaison d'attribut HTML

<td [attr.colspan]=”tableColspan”>Something</td>

tableColspan est une expression, lorsque l'interface rend la valeur de tableColspan être lié au colspan derrière attr. Allez dans

et modifiez bind.component.html

<!-- 增加代码 -->
<p>
 <p>[attr.colspan] 例子：</p>
 <table border="1px">
 <tr>
 <td [attr.colspan]="colspanSize">跨列的例子</td>
 </tr>
 <tr>
 <td>单元格1</td>
 <td>单元格1</td>
 </tr>
 </table>

Image :

Liaison de classe CSS

Le premier cas

[calss]

La valeur de someExpression remplacera complètement la valeur de class.

Modifier bind.component.css

.a{background-color: #A7A9AE;}
.b{color: #488aff;}
.c{font-size: 1rem;}

Modifier bind.component.html

<!-- 增加代码 -->
<p>
 <p>CSS 类绑定例子1：[class]</p>
 <p [class]="pClass">CSS 类绑定，[class] 全部替换的例子</p>
</p>

Modifier bind.component.ts

pClass: string;
constructor() {
 //在3秒钟之后将样式设置为 " a b c "
 setInterval(()=>{
 this.pClass = "a b c";
 }, 3000)
}

Illustration :

Le deuxième cas

[calss.special]

isSpecial est un booléen, quand isSpecial est vrai, la valeur spéciale apparaîtra, et lorsqu'elle est fausse, elle n'apparaîtra pas.

Modifier bind.component.html

<!-- 增加代码 -->
<p [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</p>

Modifier bind.component.ts

pClass: string;
isSpcial: boolean = false;
constructor() {

 setInterval(()=>{
 this.pClass = "a b c";
 
 //在 3秒钟之后显示样式
 this.isSpcial = true;
 }, 3000)
}

Image :

Le troisième cas

[ngClass]="{aaa:isA, bbb: isB}"

aaa fait référence à la valeur d'attribut de la classe sur l'étiquette, isA est booléen et l'attribut aaa ne sera affiché que lorsque isA est vrai . De la même manière, bbb c'est pareil.

Modifier bind.component.html

<!-- 增加代码 -->
<p [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</p>

Modifier bind.component.ts

pClass: string;
isSpcial: boolean = false;
isA: boolean = false;
isB: boolean = false;
constructor() {
 setInterval(()=>{
 this.pClass = "a b c";
 this.isSpcial = true;

 this.isA = true
 this.isB = true
 }, 3000)
}

Image :

Liaison d'attribut de style

Le premier cas

[style.color] = "isSpecial ? 'red' : 'green' "

Contrôler la couleur du style, si la valeur de isSpecial est vraie, alors l'attribut color est rouge.

Le deuxième cas

[ngStyle]= "{'font-style' : this.canSave ? 'italic' : 'normal' }"

Style de contrôle font-style Si la valeur de this.canSave est trur, alors le style est italique, sinon c'est normal

est écrit à la fin

1. La liaison d'attribut de Style est la même que la liaison d'attribut de classe.

2. Le code utilisé dans l'article est combiné avec l'exemple ci-dessus de liaison de données dans les notes d'étude Angular2, adresse du lien : //www.jb51.net/article/132122.htm

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

Articles connexes :

Comment implémenter la sous-séquence commune la plus longue en javascript

Comment obtenir la progression du téléchargement du fichier dans Node.js ?

Pourquoi Node.js deviendra-t-il le développement d'applications web ?

Comment utiliser javascript pour obtenir des prix différents pour chaque jour dans la plage de dates

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!