単一コンテンツ投影ng-contentを使用して実装する <!-- コンポーネント- app-content-single --> <div> <h2>タイトル</h2> <!-- 投影コンテンツの表示位置 --> <コンテンツ></コンテンツ> </div> <!-- 使用法 --> <アプリコンテンツシングル> <div>これはコンテンツです</div> </アプリコンテンツシングル> マルチコンテンツ投影
<!-- コンポーネント- app-content-more --> <div> <h3>牧夫の称号</h3> <ng-content select=".header"></ng-content> <h3>本文タイトル</h3> <ng-content select="[本文]"></ng-content> <h3>デフォルトのタイトル</h3> <コンテンツ></コンテンツ> <h3>フッタータイトル</h3> <ng-content select="フッター"></ng-content> </div> <!-- 使用法 --> <アプリコンテンツの詳細> <div>これは default01 です</div> <div class="header">これはヘッダーです</div> <div>これは default02 です</div> <div body>これが本文です</div> <div>これは default03 です</div> <footer>これはフッターです</footer> <div>これは default04 です</div> </アプリコンテンツ> 条件付きコンテンツ投影- 単一条件のコンテンツ投影例えば、現在人々のリストがあるとします。ある人のお金が200を超えると、コンポーネントのテンプレートで定義されたコンテンツが追加されます。 ng-templateと連携してテンプレートを取得するためにappChildRefディレクティブを定義する '@angular/core' から Directive、TemplateRef をインポートします。 @指令({ セレクター: '[appChildRef]' }) エクスポートクラスChildRefDirective { コンストラクター(パブリックテンプレートRef: TemplateRef<any>) { } } アプリ-人物-html<div class="list-item" *ngFor="let person of persons;"> <div>名前: {{ person.name }}}</div> <div>お金: {{ person.money }}</div> <div *ngIf="人.お金> 200"> <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container> </div> </div> アプリ担当者 - ts'@angular/core' から Component、ContentChild、OnInit をインポートします。 '../../../../directives/child-ref.directive' から { ChildRefDirective } をインポートします。 @成分({ セレクタ: 'app-persons'、 テンプレート URL: './persons.component.html', スタイル URL: ['./persons.component.scss'] }) エクスポートクラスPersonsComponentはOnInitを実装します{ 人: { 名前: 文字列; お金: 数値; }[] = [ { 名前: 'ジャック', お金: 120 }, { 名前: 'Li Li', お金: 210 }, { 名前: '張三', お金: 170 }, ]; ChildRefDirective は、コンテンツ オブジェクトの子として宣言されます。 コンストラクタ() { } ngOnInit(): void { } } 使用<アプリの人物> <ng-template アプリの子参照> <div style="font-size: 14px; color: red;">これは子参照コンテンツです</div> </ng-テンプレート> </app-persons> レンダリング複数の条件付きコンテンツ投影例: 埋め込みテンプレートをバインドして、人物データのフィールドを通じて表示したいとします。 appChildRef 調整'@angular/core' から Directive、Input、TemplateRef をインポートします。 @指令({ セレクター: '[appChildRef]' }) エクスポートクラスChildRefDirective { // 定義されたテンプレート名を受け入れ、この名前と persons のレンダリング フィールドを通じて対応するテンプレート コンテンツを表示します @Input() appChildRef!: string; コンストラクター(パブリックテンプレートRef: TemplateRef<any>) { } } アプリ-人物-html<div class="list-item" *ngFor="let person of persons;let i=index;"> <div>名前: {{ person.name }}}</div> <div>お金: {{ person.money }}</div> <!-- <div *ngIf="person.money > 200"> <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container> </div> --> <div *ngIf="person.render && tempRefs[person.render]"> <!-- ngTemplateOutlet ディレクティブを使用して、現在の人物データをテンプレートに渡します --> <ng-container *ngTemplateOutlet="tempRefs[person.render].templateRef; コンテキスト: { $implicit: person, i: i }"></ng-container> </div> </div> アプリ担当者 - ts'@angular/core' から Component、ContentChild、ContentChildren、OnInit、QueryList をインポートします。 '../../../../directives/child-ref.directive' から { ChildRefDirective } をインポートします。 @成分({ セレクター: 'app-form-unit', テンプレート URL: './form-unit.component.html', スタイル URL: ['./form-unit.component.scss'] }) エクスポートクラスFormUnitComponentはOnInitを実装します{ persons: { name: 文字列; money: 数値; render?: 文字列; }[] = [ { 名前: 'ジャック', お金: 120, レンダリング: 'temp1' }, { name: '李璃', money: 210, render: 'temp2' }, { name: '张三', money: 170, render: 'temp3' }, ]; // @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective; @ContentChildren(ChildRefDirective) childrenRef!: QueryList<ChildRefDirective>; tempRefs() を取得する { 定数 aObj: 任意 = {}; this.childrenRef.forEach(テンプレート => { 定数キー: string = template.appChildRef; aObj[キー] = テンプレート; }) aObj を返します。 } コンストラクタ() { } ngOnInit(): void { } } 使用<アプリの人物> <ng-template appChildRef="temp1" let-person let-index="i"> <div style="font-size: 14px; color: red;">{{index}}-{{person.name}}: これは temp1 です</div> </ng-テンプレート> <ng-template appChildRef="temp2" let-person let-index="i"> <div style="font-size: 14px; color: green;">{{index}}-{{person.name}}: これは temp2 です</div> </ng-テンプレート> <ng-template appChildRef="temp3" let-person let-index="i"> <div style="font-size: 14px; color: orange;">{{index}}-{{person.name}}: これは temp3 です</div> </ng-テンプレート> </app-persons> レンダリング要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で XFS パーティション形式のルート ディレクトリを縮小する方法
目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....
1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...
MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...
目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...
Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...
MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...
1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...
目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...
静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...
最近、インターフェースを描画しているときに、インターフェースに垂直線を描画し、この垂直線の高さが親 ...
導入コンテンツから始めましょう。誰もが次のような面接のシナリオに遭遇したことがあると思います。インタ...
目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...
序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...
コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...