Parlons brièvement du moteur de modèles angulaires ng-template

Cet article vous guidera à travers le modèle Angularutilisé dans la console de gestion de la reconstruction > moteur ng-template, présentez brièvement ng-container, ngIf, ngFor, ngClass, ngStyle et ngSwitch dans ng-template.

Le moteur de template est en web applications Un moyen de générer du HTML dynamique, chargé de combiner le modèle de données avec le modèle HTML (c'est-à-dire le rendu du modèle) pour générer le HTML final. La syntaxe d'écriture des modèles HTML est appelée syntaxe des modèles. L'expressivité et l'évolutivité de la syntaxe des modèles déterminent la facilité d'utilisation du moteur de modèles. [Tutoriels associés recommandés : "tutoriel angulaire"]

Introduction à ng-template

ng-template est représenté par Angulartemplate : cela signifie que le contenu de cette balise contiendra une partie du modèle, qui peut ensuite être combiné avec d'autres modèles pour former le modèle de composant final.

ng-template comprend principalement : ng-container, ngIf, ngFor, ngClass, ngStyle et ngSwitch.

ng-container

ng-container est un conteneur logique, l'une des Angular instructions structurelles, utilisé pour contenir des contrôles internes les éléments sont affichés ou non.

ng-container peut contenir n'importe quel élément, y compris du texte, mais il ne générera pas de balises d'élément par lui-même et n'affectera pas non plus le style et la mise en page de la page. Le contenu contenu, s'il n'est pas contrôlé par d'autres instructions, sera rendu directement sur la page.

Syntaxe de base

<div>
  <ng-container>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
  </ng-container>
</div>

Après le rendu

<div>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
</div>

ngIf

ngIf est utilisé pour restituer le contenu du modèle then ou else à la position spécifiée en fonction de la valeur de l'expression.

* `then` 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。

* `else` 模板除非绑定对应的值，否则默认是 null。复制代码

Formulaire simple

<div *ngIf="!isLoggedIn">
  Please login, friend.
</div>

<!-- logic && operator -->
<div *ngIf="isLoggedIn && !isNewUser">
  Welcome back, friend.
</div>

<!-- logic OR operator -->
<div *ngIf="isLoggedIn || isNewUser">
  Welcome!
</div>

Utiliser le bloc else

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

Utiliser les blocs then et else

<ng-container *ngIf="isLoggedIn; then loggedIn; else loggedOut"></ng-container>

<ng-template #loggedIn>
  <div>
    Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

ngFor

ngForUne façon de répéter un modèle en utilisant chaque élément d'un itérable comme contexte du modèle. Des valeurs supplémentaires sont fournies et peuvent être aliasées par des variables locales :

• index - la position de l'élément actuel dans l'itérable à partir de 0
• first - si l'élément actuel l'élément est dans un itérable est le premier élément de l'itérable
• last - vrai si l'élément actuel est le dernier élément de l'itérable
• even - vrai si l'index actuel est même vrai
• odd - vrai si l'index actuel est impair

<mat-list-item *ngFor="let event of events">
    <h3 matLine>{{event.title}}</h3>
    <p matLine class="secondary-text">{{event.detail}}</p>
</mat-list-item>

ngClass Le h3> La directive

ngClass modifie l'attribut de classe du composant ou de l'élément auquel elle est attachée.

<a
      class="favorite"
      [ngClass]="[isFavorite ? &#39;text-dark&#39; : &#39;text-gray&#39;]"
      (click)="setFavorite()"
>
      <i class="fe fe-heart font-size-21"></i>
</a>

ngClassLe premier paramètre est le nom de la classe et le deuxième paramètre est la valeur booléenne. Si c'est vrai, la classe du premier paramètre est ajoutée.

ngStyle

ngStyle pour modifier l'attribut de style du composant ou de l'élément.

<div class="label-color" [ngStyle]="{&#39;background-color&#39;: labels | getById:labelId:&#39;color&#39;}"></div>
// 判断添加
<div [ngStyle]="{&#39;background-color&#39;:template === &#39;dark&#39; ? &#39;dark&#39; : &#39;light&#39; }"></<div>

ngSwitch

ng-switchAfficher ou masquer la partie correspondante selon la valeur de l'expression.

• ng-switch-when - Option de condition correspondante, si elle correspond, elle sera affichée, et si elle correspond, elle sera supprimée.

• ng-switch-default - Définissez l'option par défaut. S'il n'y a pas de correspondance, l'option par défaut sera affichée.

<div ng-switch="表达式/变量">
    <div ng-switch-when="value"></div>
    <div ng-switch-when="value"></div>
    <div ng-switch-when="value"></div>
    <div ng-switch-default></div>
</div

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!