Lassen Sie uns kurz über die Angular-Template-Engine ng-template sprechen

Dieser Artikel führt Sie durch die Angular Template Engine ng-template, die in der Rekonstruktionsverwaltungskonsole verwendet wird, und stellt ng-container, ngIf, ngFor, ngClass, ngStyle und ngSwitch in ng-template kurz vor.

Die Template-Engine ist eine Möglichkeit, dynamisches HTML in Webanwendungen zu generieren. Sie ist für die Kombination des Datenmodells mit der HTML-Vorlage (d. h. Template-Rendering) verantwortlich, um das endgültige HTML zu generieren. Die Syntax zum Schreiben von HTML-Vorlagen wird als Vorlagensyntax bezeichnet. Die Ausdruckskraft und Skalierbarkeit der Vorlagensyntax bestimmen die Benutzerfreundlichkeit der Vorlagen-Engine. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

ng-template-Einführung

ng-template wird als Angular-Vorlage dargestellt: Dies bedeutet dieses Tag Der Inhalt enthält Teile der Vorlage, die dann mit anderen Vorlagen kombiniert werden können, um die endgültige Komponentenvorlage zu bilden. ng-template表示为Angular模板：这意味着此标记的内容将包含模板的一部分，然后可以与其他模板一起组合以形成最终的组件模板。

ng-template主要包括：ng-container、ngIf，ngFor、ngClass、ngStyle和ngSwitch。

ng-container

ng-container是一个逻辑容器，是 Angular 结构型指令中的一种，用于包含控制内部元素的显示与否。

ng-container可以包含任何元素，包括文本，但本身不会生成元素标签，也不会影响页面样式和布局。包含的内容，如果不通过其他指令控制，会直接渲染到页面中。

基本语法

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

渲染后

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

ngIf

ngIf 用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。

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

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

简单形式

<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>

使用else块

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

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

使用then和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

ngFor用于使用可迭代的每个项作为模板的上下文来重复模板的一种方式。提供了可以被局部变量别名的其他值：

• index - 当前项目的位置在从0开始的迭代中
• first - 如果当前项是可迭代中的第一个项，则为true
• last - 如果当前项是可迭代中的最后一个项，则为true
• even - 如果当前索引为偶数，则为true
• odd - 如果当前索引是奇数，则为true

<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

ngClass指令更改绑定到其附加的组件或元素的class属性。

<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>

ngClass第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类。

ngStyle

ngStyle来修改组件或元素的style属性。

<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-switch根据表达式的值显示或这隐藏对应部分。

• ng-switch-when - 对应条件选项，如果匹配选中选择显示，其他为匹配的则移除。

• ng-switch-default

  ng-template umfasst hauptsächlich: ng-container, ngIf, ngFor, ngClass</ code> code>, <code>ngStyle und ngSwitch.

ng-container

ng-container ist ein logischer Container und eine der Strukturdirektiven Typ Angular, Wird verwendet, um zu steuern, ob interne Elemente angezeigt werden oder nicht.

🎜ng-container kann jedes Element enthalten, einschließlich Text, generiert jedoch selbst keine Element-Tags und hat auch keinen Einfluss auf den Seitenstil und das Layout. Der enthaltene Inhalt wird, sofern er nicht durch andere Anweisungen gesteuert wird, direkt auf der Seite gerendert. 🎜

🎜Grundlegende Syntax🎜

<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

🎜Nach dem Rendern🎜

rrreee

🎜ngIf🎜🎜🎜ngIf wird verwendet, um den Inhalt der Vorlage then oder else an der angegebenen Position basierend auf zu rendern der Wert des Ausdrucks. 🎜rrreee

🎜Einfaches Formular🎜

rrreee

🎜use else Block🎜

rrreee

🎜Verwenden Sie then- und else-Blöcke🎜

rrreee

🎜ngFor🎜🎜🎜ngFor für die Verwendung von Iterables. Eine Möglichkeit dazu Wiederholen Sie eine Vorlage, wobei jedes Element als Kontext der Vorlage dient. Stellt andere Werte bereit, die durch lokale Variablen aliasiert werden können: 🎜

• index – die Position des aktuellen Elements in der Iteration beginnend bei 0 🎜
• first – wahr, wenn das aktuelle Element das erste Element im iterierbaren Teil ist. <li> <code>last – wahr, wenn das aktuelle Element das letzte Element im iterierbaren Teil ist /code> – wahr, wenn der aktuelle Index gerade ist🎜
• odd – wahr, wenn der aktuelle Index ungerade ist🎜🎜rrreee

  🎜ngClass🎜🎜 🎜 Die ngClass-Direktive ändert das Klassenattribut der Komponente oder des Elements, an das sie angehängt ist. 🎜rrreee🎜ngClassDer erste Parameter ist der Klassenname und der zweite Parameter ist der boolesche Wert. Wenn er wahr ist, wird die Klasse des ersten Parameters hinzugefügt. 🎜

  🎜ngStyle🎜🎜🎜ngStyle zum Ändern des Stilattributs der Komponente oder des Elements. 🎜rrreee

  🎜ngSwitch🎜🎜🎜ng-switch zeigt den entsprechenden Teil entsprechend dem Wert des Ausdrucks an oder verbirgt ihn. 🎜

  • 🎜ng-switch-when – Entsprechende Bedingungsoption. Wenn die passende Option ausgewählt ist, wird sie angezeigt, andernfalls wird sie entfernt, wenn sie übereinstimmt. 🎜🎜
  • 🎜ng-switch-default – Legen Sie die Standardoption fest. Wenn keine Übereinstimmung vorliegt, wird die Standardoption angezeigt. 🎜🎜🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns kurz über die Angular-Template-Engine ng-template sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!