web-dev-qa-db-ja.com

ng-templateを別のファイルにロードする方法は？

下のサンプルでは、​​下のようにng-templateを使用しており、正常に動作しています。

サンプルリンク： ここをクリック

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
        <button ejs-button cssClass="e-info">Sign In</button>
      </span>
</ng-template>

しかし、ng-templateコンテンツ用の新しいファイルを作成し、別のファイルで使用したい。私は以下のように試しましたが、動作していません。この場合の解決策を見つけるのを手伝ってください。

template.html

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span>
  {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
    <button ejs-button cssClass="e-info">Sign In</button>
  </span>
</ng-template>

default.html

<div class="control-section">
  <ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-container *ngTemplateOutlet="template;"></ng-container>
  </ejs-menu>
</div>

サンプル2： サンプル2

ref stackoverflow question： 別のファイルのangular2 ng-template

htmlangularng-templateng-container
6
kumaresan_sd

テンプレート用のコンポーネント（tplComponentという名前）を作成し、その中に必要な数のテンプレートを作成できます。次に、他のコンポーネントでtplComponentのインスタンスを取得し、そこからテンプレートを取得します。これは question で、このアプローチの例があります（試したことはありません）。

それが機能するかどうか教えてください。

0
Vahid

* ngTemplateOutletを使用して同じものをアーカイブできます

以下のリンクを参照してください

ngTemplateOutlet

0
siddharth shah