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

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

単一コンテンツ投影

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 集計、グループ化、並べ替え

推薦する

Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...

HTML フォーム_PowerNode Java アカデミー

1. フォーム1. フォームの役割HTML フォームは、さまざまな種類のユーザー入力を受け取り、ユー...

pdf.js を使用して Vue で PDF ファイルをプレビューする方法

ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...

仮想マシンに Linux rhel7.3 オペレーティング システムをインストールする (具体的な手順)

仮想化ソフトウェアをインストールする仮想マシンにオペレーティング システムをインストールする前に、ホ...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

実践的な経験を共有するためのコードチェックツールstylelintの紹介

目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

JavaScript を使用してテーブル情報を追加および削除する

JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...

Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

簡単です。チュートリアルを見てください。ブロガー1. まずdockerを起動するサービスdocker...

MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

JS上級編ES6の6つの継承方法

目次1. プロトタイプチェーン継承2. コンストラクタによる継承3. 組み合わせ継承4. プロトタイ...

jQueryは何に使われるのですか?jQueryは実際にはjsフレームワークです

jQuery 入門jQuery ライブラリは、簡単なマークアップ行を使用して Web ページに追加で...

MySQL バッチ挿入とユニークインデックスの問題に対する解決策

MySQL バッチ挿入の問題プロジェクトを開発しているときに、古いシステムの基本データを事前にインポ...

Reactはグローバル箇条書きボックスメソッドをカプセル化します

この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...