Une brève discussion sur les directives de modèle angulaire : utilisation de ng-template et ng-container

Cet article vous donnera une brève introduction aux directives ng-template et ng-container des modèles Angular, et vous expliquera comment utiliser les directives ng-template et ng-container.

Introduction à la directive ng-template

ng-template est une directive structurelle angulaire utilisée pour restituer du HTML. Il n'est jamais affiché directement. En fait, Angular remplace le modèle ng et son contenu par une annotation avant de restituer la vue. [Recommandation de didacticiel connexe : "tutoriel angulaire"]

Si vous n'utilisez pas de directives structurelles et que vous enveloppez simplement d'autres éléments dans ng-template, ces éléments seront invisibles.

Des instructions telles que *ngFor et *ngIf Angular traduiront en interne ces attributs en un élément et l'utiliseront pour envelopper l'élément hôte.

Introduction à la directive ng-container

Pour éviter de créer des divs supplémentaires, nous pouvons utiliser ng-container à la place, qui est un élément de regroupement, mais cela ne polluera pas le style ou la disposition des éléments car Angular ne mettra pas du tout Entrez dans le DOM. ng-container est un élément de syntaxe reconnu et traité par l'analyseur angulaire. Ce n'est pas une directive, un composant, une classe ou une interface, mais plutôt des accolades dans un bloc if en JavaScript.

ng-container use

Usage 1 (l'utilisation la plus basique)

Lorsque nous écrivons dans une boucle de liste, nous avons des jugements à faire. Nous savons que les instructions structurelles d'angular ne le permettent pas. deux En même temps, si nous ne voulons pas ajouter de divs supplémentaires pour le moment, nous pouvons utiliser ng-container

<ul>
    <ng-container *ngFor="let item of list">
        <li *ngIf="item.context">{{item.context}}</li>
    </ng-container>
</ul>

Usage 2 (utilisé conjointement avec ngSwitch)

<ng-container [ngSwitch]="type">
    <ng-container *ngSwitchCase="&#39;title&#39;">标题</ng-container>
    <ng-container *ngSwitchCase="&#39;text&#39;">内容</ng-container>
    <ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>

Bien sûr, ngSwitch peut également être écrit directement sur la balise html.

Utilisation trois (utilisée en conjonction avec ng-template)

peut être utilisée en conjonction avec le modèle pour extraire le contenu du module en double ou transmettre des paramètres au modèle à afficher. Par exemple, dans l'exemple suivant, la partie A a le nom et l'introduction de la partie A, et la partie B a également ces introductions, afin que nous puissions intégrer les introductions conjointes.

<div>
    <!--甲方-->
    <div>
        <div class="left">甲方：</div>
        <div class="right">
            甲方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
            <!--也可以写成这种方式-->
            <!--
            <ng-container [ngTemplateOutlet]="introduce"
                [ngTemplateOutletContext]="{data: data.partyA}">
            </ng-container>
            [ngTemplateOutlet]也可用在ng-template上
            -->
        </div>
    </div>
    <!--乙方-->
    <div>
        <div class="left">乙方：</div>
        <div class="right">
            乙方姓名
            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
        </div>
    </div>
    <!--let-data="data"就是上面传进来的值-->
    <ng-template #introduce let-data="data">
        <p>合同介绍......</p>
    </ng-template>
</div>

ngTemplateOutlet est une chaîne qui définit la référence du modèle et l'objet contexte (c'est-à-dire ng-template) du modèle, donc s'il existe plusieurs références de modèle, vous pouvez utiliser cette méthode ngTemplateOutletContext est l'objet de contexte (c'est-à-dire ng-template) auquel EmbeddedViewRef est attaché. Il doit s'agir d'un objet dont les clés peuvent être utilisées pour les liaisons déclarées par le modèle local let. L'utilisation de $implicit une clé dans un objet contextuel (c'est-à-dire ng-template) définira sa valeur sur la valeur par défaut. ngTemplateOutlet peut également être utilisé pour les modèles transmis en externe

child.component.html

<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>

child.component.ts

@Input() tplRef: TemplateRef<any>

ng-template usage

Usage one

Combiné avec * ngIf Use, de cette façon, vous n'avez pas besoin d'ajouter deux conditions de jugement différentes, vous pouvez utiliser l'instruction if else directement dans html

<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
    <div class="gary">暂无数据</div>
</ng-template>

Usage 2

Lorsque vous utilisez le modalService d'antd pour créer une boîte de dialogue sur la page , vous pouvez écrire le modèle en HTML, le charger par référence et le mettre dans le nzContent du modal (c'est un peu déroutant, regardez le code)

<ng-tempalte #content>xxxxxxx</ng-template>

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild(&#39;content&#39;) contentTpl: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: &#39;标题&#39;,
            nzContent: this.contentTpl
        })
    }
}

Utilisez trois

passez-le au composant en entrée variable sous forme de modèle, afin que nous puissions écrire ce que vous voulez lors de l'utilisation de ce composant Par exemple, si nous écrivons un composant partagé qui n'a pas encore de données, nous n'avons généralement besoin que de transmettre du texte. Dans certains cas particuliers, nous devrons peut-être ajouter de nouveaux boutons.

empty.component.html

<div>
    <img src=""/>
    <div>
        <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplate(text)"
                [ngTemplateOutlet]="text"
            ></ng-container>
        </ng-container>
        {{text || &#39;&#39;}}
    </div>
</div>

empty.component.ts

export class EmptyComponent {
    @Input() text: TemplateRef<any>
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

En résumé, voici quelques-unes des utilisations les plus élémentaires. Ce sont les utilisations que je connais maintenant. Si vous en savez plus, vous l'êtes. bienvenue à ajouter.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos 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!