Eine kurze Diskussion über Angular-Vorlagendirektiven: Verwendung von ng-template und ng-container

Dieser Artikel gibt Ihnen eine kurze Einführung in die ng-template- und ng-container-Anweisungen von Angular-Vorlagen und stellt vor, wie Sie die ng-template- und ng-container-Anweisungen verwenden.

Einführung in die ng-template-Direktive

ng-template ist eine Angular-Strukturdirektive, die zum Rendern von HTML verwendet wird. Es wird nie direkt gezeigt. Tatsächlich ersetzt Angular das ng-template und seinen Inhalt durch eine Anmerkung, bevor die Ansicht gerendert wird. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Wenn Sie keine Strukturanweisungen verwenden und nur einige andere Elemente in ng-template einbinden, sind diese Elemente unsichtbar.

Anweisungen wie *ngFor und *ngIf Angular übersetzen diese Attribute intern in ein Element und verwenden es zum Umschließen des Hostelements.

Einführung in die ng-container-Direktive

Um die Erstellung zusätzlicher Divs zu vermeiden, können wir stattdessen ng-container verwenden, ein Gruppierungselement, das jedoch den Stil oder das Elementlayout nicht verschmutzt, da Angular dies nicht tut es überhaupt Geben Sie das DOM ein. ng-container ist ein Syntaxelement, das vom Angular-Parser erkannt und verarbeitet wird. Es handelt sich nicht um eine Direktive, Komponente, Klasse oder Schnittstelle, sondern eher um die geschweiften Klammern in einem if-Block in JavaScript. Verwendung von ng-Containern zwei Wenn wir zu diesem Zeitpunkt keine zusätzlichen Divs hinzufügen möchten, können wir gleichzeitig ng-container

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

Verwendung 2 (in Verbindung mit ngSwitch verwendet)

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

Natürlich kann ngSwitch das auch direkt auf den HTML-Tag geschrieben werden.

Verwendung drei (in Verbindung mit ng-template verwendet)

kann in Verbindung mit template verwendet werden, um doppelte Modulinhalte zu extrahieren oder Parameter an die anzuzeigende Vorlage zu übergeben. Im folgenden Beispiel hat Partei A beispielsweise den Namen und die Einleitung von Partei A, und Partei B hat auch diese Einleitungen, sodass wir die gemeinsamen Einleitungen integrieren können.

<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 ist eine Zeichenfolge, die die Vorlagenreferenz und das Kontextobjekt (d. h. ng-template) der Vorlage definiert. Wenn also mehrere Vorlagenreferenzen vorhanden sind, können Sie diese Methode verwenden ngTemplateOutletContext ist das Kontextobjekt (d. h. ng-template), an das EmbeddedViewRef angehängt ist. Dies sollte ein Objekt sein, dessen Schlüssel für Bindungen verwendet werden können, die von der lokalen Vorlage let deklariert werden. Wenn Sie $implicit einen Schlüssel in einem Kontextobjekt (z. B. ng-template) verwenden, wird dessen Wert auf den Standardwert gesetzt. ngTemplateOutlet kann auch für extern übergebene Vorlagen verwendet werden

Kombiniert mit * ngWenn Sie es verwenden, müssen Sie auf diese Weise nicht zwei verschiedene Beurteilungsbedingungen hinzufügen. Sie können die if else-Anweisung direkt in HTML verwenden , Sie können die Vorlage in HTML schreiben, sie per Referenz laden und in den nzContent des Modals einfügen (es ist etwas verwirrend, schauen Sie sich den Code an) Variable in Form einer Vorlage, damit wir bei Verwendung dieser Komponente schreiben können, was Sie möchten Wenn wir beispielsweise eine gemeinsam genutzte Komponente schreiben, die noch keine Daten enthält, müssen wir normalerweise nur Text übergeben. In einigen Sonderfällen müssen wir möglicherweise einige neue Schaltflächen hinzufügen.

empty.component.html

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

empty.component.ts

@Input() tplRef: TemplateRef<any>

Zusammenfassend sind dies einige der grundlegendsten Verwendungen, die ich jetzt kenne Gerne hinzufügen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Angular-Vorlagendirektiven: Verwendung von ng-template und ng-container. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!