角度コンテンツ投影の詳細な説明

角度コンテンツ投影の詳細な説明

単一コンテンツ投影

ng-contentを使用して実装する

<!-- コンポーネント- app-content-single -->
<div>
  <h2>タイトル</h2>
  <!-- 投影コンテンツの表示位置 -->
  <コンテンツ></コンテンツ>
</div>
<!-- 使用法 -->
<アプリコンテンツシングル>
  <div>これはコンテンツです</div>
</アプリコンテンツシングル>

マルチコンテンツ投影

ng-contentを使用して実装する

<!-- コンポーネント- 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>
</アプリコンテンツ>

条件付きコンテンツ投影- ng-templateng-containerdirectiveなどを使用して実現する

単一条件のコンテンツ投影

例えば、現在人々のリストがあるとします。ある人のお金が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 のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Angularコンポーネント投影の詳細な説明
  • Angularプロジェクトにおける共有モジュールの実装の詳細な説明
  • Angularルーティングサブルートの詳細な説明
  • Angularルーティングの基礎の詳細な説明
  • Angularコンポーネントのライフサイクルの詳しい説明(パート2)
  • Angularコンポーネントライフサイクルの詳細説明(I)
  • Angularコンポーネントの仲介モードの詳細な説明

<<:  Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

>>:  SQL 集計、グループ化、並べ替え

推薦する

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....

MySQL の重要なパフォーマンス インデックスの計算と最適化方法の概要

1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...

Nginxのアクセスボリューム制御の詳細な説明

目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...

Linux ps および pstree コマンドの知識ポイントのまとめ

Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...

MySQL での置換例の詳細な説明

MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...

最新のmysql-5.7.21のインストールと設定方法

1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

Nginx の動的および静的分離実装ケースのコード分析

静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...

HTML で 2 つの div タグの間に垂直線を描く方法

最近、インターフェースを描画しているときに、インターフェースに垂直線を描画し、この垂直線の高さが親 ...

MySQL プロジェクトでトランザクション分離レベルを選択する方法

導入コンテンツから始めましょう。誰もが次のような面接のシナリオに遭遇したことがあると思います。インタ...

CocosCreator で物理エンジン ジョイントを使用する方法

目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...

CentOS7でPHPスケジュールタスクを実行する方法

序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...