The <ng-container> is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a JavaScript if-block:

if (someCondition) {statement1;statement2;statement3; }

Without those braces, JavaScript would only execute the first statement when you intend to conditionally execute all of them as a single block. The <ng-container> satisfies a similar need in Angular templates.

編寫一個功能和NgIf相反的指令：

源代碼如下：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';/*** Add the template content to the DOM unless the condition is true.*//* The directive's selector is typically the directive's attribute name in square brackets, [appUnless]. The brackets define a CSS attribute selector. */ @Directive({ selector: '[appUnless]'}) export class UnlessDirective {private hasView = false;/*A simple structural directive like this one creates anembedded view from the Angular-generated <ng-template> andinserts that view in a view container adjacent to the directive's original <p> host element.*//*You'll acquire the <ng-template> contents with a TemplateRef and access the view container through a ViewContainerRef. 這里不用操心這些服務的 provider 是誰？*/constructor(// 訪問<ng-template>內容private templateRef: TemplateRef<any>,// 訪問view containerprivate viewContainer: ViewContainerRef) { }/*The directive consumer expects to bind a true/false condition to [appUnless]. That means the directive needs an appUnless property, decorated with @Input*/@Input() set appUnless(condition: boolean) {// 如果condition不滿足才顯示view/*Angular sets the appUnless property whenever the value of the condition changes. Because the appUnless property does work, it needs a setter.*/if (!condition && !this.hasView) {this.viewContainer.createEmbeddedView(this.templateRef);this.hasView = true;} else if (condition && this.hasView) {this.viewContainer.clear();this.hasView = false;}} }

在App module里的declarations區域導入新建的Directive：

在 Component HTML 里消費這個自定義指令：

<h2 id="appUnless">UnlessDirective</h2> <p>The condition is currently<span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.<button(click)="condition = !condition"[ngClass] = "{ 'a': condition, 'b': !condition }" >Toggle condition to {{condition ? 'false' : 'true'}}</button> </p><!-- 為什么這里消費 Directive 用的是 *? --> <p *appUnless="condition" class="unless a">(A) This paragraph is displayed because the condition is false. </p><p *appUnless="!condition" class="unless b">(B) Although the condition is true,this paragraph is displayed because appUnless is set to false. </p>

最后的效果：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular 自定义 structural 指令的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。