ホームページ >ウェブフロントエンド >jsチュートリアル >Angular テンプレート ディレクティブに関する簡単な説明: ng-template と ng-container の使用法
この記事では、Angular テンプレートの ng-template および ng-container ディレクティブについて簡単に説明し、ng-template および ng-container ディレクティブの使用方法を紹介します。
ng-template は、HTML のレンダリングに使用される Angular 構造ディレクティブです。それが直接示されることはありません。実際、Angular はビューをレンダリングする前に、ng-template とそのコンテンツを注釈に置き換えます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
構造ディレクティブを使用せず、他の要素を ng-template にラップするだけの場合、それらの要素は非表示になります。
*ngFor や *ngIf などの命令は、Angular でこれらの属性を内部的に要素に変換し、それを使用してホスト要素をラップします。
余分な div の作成を避けるために、代わりに ng-container を使用できます。これはグループ化要素ですが、汚染はしません。スタイルまたは要素のレイアウト。Angular はそれを DOM にまったく入れないからです。 ng-container は、Angular パーサーによって認識および処理される構文要素です。これはディレクティブ、コンポーネント、クラス、インターフェイスではなく、JavaScript の if ブロックの中括弧に似ています。
使用法 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="'title'">标题</ng-container> <ng-container *ngSwitchCase="'text'">内容</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
0e39fb383178c135a8b4827060503ef7e43f8886161e94258ae0edd4bbcbe9d8
child.component.ts
@Input() tplRef: TemplateRef2cfd83bcbfaff9bacc12c0937fd77054
##使用法 1
*ngIf と組み合わせて使用すると、必要がなくなります2 つの異なる判定条件を追加するには、html43ecd257184eb110410607a38c761881{{text}}16b28748ea4df4d9c2150843fecfba68 cc40e06c3211ced067f2c51280507556 4bfe05b6eb3b9c70b9ffa04f5006a20e暂无数据16b28748ea4df4d9c2150843fecfba68 e43f8886161e94258ae0edd4bbcbe9d8
で if else ステートメントを直接使用できます。使用方法 2
antd の modalService を使用してページ内のダイアログ ボックスで、次のことができます。 テンプレートは HTML で記述され、参照によってロードされ、モーダルの nzContent に配置されます (少しわかりにくいので、コードを見てください)<ng-tempalte #content>xxxxxxx</ng-template>
export class AppComponent implements OnInit { // 引入模板 @ViewChild('content') contentTpl: TemplateRef<any>; ngOnInit() { this.modalService.create({ nzTitle: '标题', 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 || ''}} </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 サイトの他の関連記事を参照してください。