À propos de l'utilisation de base des directives intégrées dans Angular4

L'article suivant vous présente principalement l'utilisation de base des instructions intégrées dans Angular4. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Je dois dire que les instructions sont l'une des fonctions les plus puissantes de ng. Eh bien, vous pouvez également en supprimer une.

Préface

Tout le monde sait que ng possède de nombreuses instructions personnalisées intégrées, ce qui nous empêche de réinventer la roue nous-mêmes. Dans le même temps, ng fournit également la fonction d'instructions personnalisées, ce qui peut rendre nos balises d'éléments de page plus instanciées.

Dans cet article, nous énumérerons l'utilisation de chaque commande intégrée et fournirons un exemple à titre de démonstration. Essayez d'utiliser la description la plus simple et la plus simple afin de pouvoir apprendre l'utilisation de base de chaque commande intégrée plus rapidement et avec plus de précision.

ngFor

Fonction : Comme une boucle for, vous pouvez prendre à plusieurs reprises des valeurs du tableau et les afficher.

Exemple :

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<p class="ui list" *ngFor="let username of userInfo">
 <p class="item">{{username}}</p>
</p>

Explication :

La syntaxe est *ngFor="let username of userInfo", où userInfo est le tableau à partir duquel les valeurs sont extraites, et username est la valeur qui en est retirée à chaque fois. Ensuite, le contenu de cette balise sera exécuté à plusieurs reprises et le nom d'utilisateur sera affiché via une liaison bidirectionnelle.

ngIf

Fonction : Décidez d'afficher ou de masquer cet élément en fonction des conditions.

Exemple :

// .html

<p *ngIf="false"></p>
<p *ngIf="a > b"></p>
<p *ngIf="username == &#39;张三&#39;"></p>
<p *ngIf="myFunction()"></p>

Explication :

• Jamais affiché

• Lorsque a est supérieur à b, il sera affiché

• Lorsque le nom d'utilisateur est égal à Zhang San Display

• Selon la valeur de retour de la fonction myFunction(), décidez si vous souhaitez afficher

ngSwitch

Fonction : Empêcher les conditions complexes de provoquer une utilisation excessive de ngIf.

Exemple :

// .html

<p class="container" [ngSwitch]="myAge">
 <p *ngSwitchCase="&#39;10&#39;">age = 10</p>
 <p *ngSwitchCase="&#39;20&#39;">age = 20</p>
 <p *ngSwitchDefault="&#39;18&#39;">age = 18</p>
</p>

Explication :

[ngSwitch] Liez d'abord à la cible, ngSwitchCase répertorie chaque possibilité et ngSwitchDefault répertorie la valeur par défaut.

ngStyle

Fonction : Vous pouvez utiliser des valeurs dynamiques pour définir les propriétés CSS pour des éléments DOM spécifiques.

Exemple :

// .ts
backColor: string = 'red';

// .html
<p [style.color]="yellow">
 你好，世界
</p>
<p [style.background-color]="backColor">
 你好，世界
</p>
<p [style.font-size.px]="20">
 你好，世界
</p>
<p [ngStyle]="{color: &#39;white&#39;, &#39;background-color&#39;: &#39;blue&#39;, &#39;font-size.px&#39;: &#39;20&#39;}">
 你好，世界
</p>

Explication :

• Réglez la couleur directement sur jaune.

• Définissez la couleur d'arrière-plan sur backColor et modifiez la valeur de backColor dans le fichier .ts.

• Définissez la taille de la police. Il est à noter que si vous écrivez uniquement la taille de la police, une erreur sera signalée. Vous devez ajouter .px à la fin. Bien sûr, .em .% sont tous acceptables.

• Les trois premiers consistent à en définir un seul, à écrire [ngStyle] pour en écrire plusieurs en même temps, à utiliser des accolades pour délimiter la force intérieure. Il convient de noter que le trait d'union - n'est pas autorisé à apparaître dans le nom de clé de l'objet. Si vous utilisez background-color, etc., vous devez ajouter des guillemets simples.

ngClass

Fonction : Définir et modifier dynamiquement le contenu d'un élément DOM donné Classe CSS.

Exemple :

// .scss
.bordered {
 border: 1px dashed black;
 background-color: #eee;
}

// .ts
isBordered: boolean = true;
 
// .html
<p [ngClass]="{bordered: isBordered}">
 是否显示边框
</p>

Explication :

• Le style est défini en scss, ce qui équivaut à la construction d'un class="bordered". Il y a un nouveau isBordered dans

• ts, qui est utilisé pour déterminer s'il faut afficher le style dans .scss.

• En HTML, isBordered est utilisé comme base pour juger si la bordure est affichée.

ngNonBindable

Fonction : indique à Angular de ne pas lier une certaine partie de la page .

Exemple :

.html

<p ngNonBindable>
 {{我不会被绑定}}
</p>

Explication :

Lorsque ngNonBindable est utilisé, les accolades seront affichées ensemble sous forme de chaîne.

Résumé

Dans le développement quotidien, ngFor et ngIf doivent être les plus utilisés, ils sont donc écrits en premier. Quant à ngNonBindable, je ne l'ai jamais utilisé une seule fois en développement réel, j'ai juste vérifié les informations et les ai testées avant de les écrire.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment désactiver la mise en cache des modèles dans AngularJs

Comment vider le cache du navigateur dans AngularJs

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!