Angular テンプレート ディレクティブに関する簡単な説明: ng-template と ng-container の使用法

この記事では、Angular テンプレートの ng-template および ng-container ディレクティブについて簡単に説明し、ng-template および ng-container ディレクティブの使用方法を紹介します。

ng-template ディレクティブの概要

ng-template は、HTML のレンダリングに使用される Angular 構造ディレクティブです。それが直接示されることはありません。実際、Angular はビューをレンダリングする前に、ng-template とそのコンテンツを注釈に置き換えます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

構造ディレクティブを使用せず、他の要素を ng-template にラップするだけの場合、それらの要素は非表示になります。

*ngFor や *ngIf などの命令は、Angular でこれらの属性を内部的に要素に変換し、それを使用してホスト要素をラップします。

ng-container ディレクティブの概要

余分な div の作成を避けるために、代わりに ng-container を使用できます。これはグループ化要素ですが、汚染はしません。スタイルまたは要素のレイアウト。Angular はそれを DOM にまったく入れないからです。 ng-container は、Angular パーサーによって認識および処理される構文要素です。これはディレクティブ、コンポーネント、クラス、インターフェイスではなく、JavaScript の if ブロックの中括弧に似ています。

ng-container の使用法

使用法 1 (最も基本的な使用法)

私たちはここではリスト ループで記述するときにいくつかの判断が必要です。Angular の構造命令では 2 つを同時に存在させることができないことがわかっています。現時点で、余分な div を追加したくない場合は、ng を使用できます。 -container

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

使い方2(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>

もちろん、htmlタグに直接ngSwitchを記述することも可能です。

使用法 3 (ng-template と組み合わせて使用​​)

をテンプレートと組み合わせて使用​​すると、重複したモジュール コンテンツを抽出したり、 pass 表示するテンプレートを指定します。 たとえば、次の例では、A 社には A 社の名前と紹介文があり、B 社にもこれらの紹介文があるため、共同紹介文を統合できます。

<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 は、テンプレート参照とテンプレートのコンテキスト (つまり ng-template) オブジェクトを定義する文字列であるため、複数のテンプレート参照がある場合は、このメソッドを使用できます。 ngTemplateOutletContext は、EmbeddedViewRef がアタッチされるコンテキスト (つまり、ng-template) オブジェクトです。これは、ローカル テンプレート let によって宣言されたバインディングにキーを使用できるオブジェクトである必要があります。コンテキスト (つまり、ng-template) オブジェクトで $implicit キーを使用すると、その値がデフォルト値に設定されます。 ngTemplateOutlet は、外部から渡されるテンプレートにも使用できます

child.component.html

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

child.component.ts

@Input() tplRef: TemplateRef<any>

ng-template の使用法

##使用法 1

*ngIf と組み合わせて使用​​すると、必要がなくなります2 つの異なる判定条件を追加するには、html

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

で if else ステートメントを直接使用できます。使用方法 2

antd の modalService を使用してページ内のダイアログ ボックスで、次のことができます。 テンプレートは HTML で記述され、参照によってロードされ、モーダルの nzContent に配置されます (少しわかりにくいので、コードを見てください)

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

使用法 3

これをテンプレートの形式で入力変数としてコンポーネントに渡し、このコンポーネントを使用するときに必要なものを記述できるようにします。 たとえば、データがまだない共有コンポーネントを作成する場合、通常はテキストを渡すだけで済みますが、特殊な場合には、新しいボタンを追加する必要がある場合もあります。

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

要約、これらは最も重要なものの一部です基本的な使用法、これらは私が今知っている使用法です。さらに詳しく知っている場合は、追加してください。

プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

以上がAngular テンプレート ディレクティブに関する簡単な説明: ng-template と ng-container の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。