15

以下のサンプルでは、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 の質問: angular2 ng-template を別のファイルに

4

4 に答える 4

12

github angular からこの質問に対する回答を得ました。これを確認してください https://github.com/angular/angular/issues/27503

答え：

ステップ1：

以下のように、テンプレートを新しいコンポーネントとして初期化しました

template.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-device',
  template: `
  <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>
`
})
export class DeviceComponent {
  @Input()
  dataSource: any;
}

次に、以下のように親コンポーネントでそのコンポーネントテンプレートを使用しました

default.html

<div class="control-section">
	<ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-template #template let-dataSource>
      <app-device [dataSource]="dataSource"></app-device>
    </ng-template>
  </ejs-menu>
</div>

サンプル リンク サンプルをクリックしてください

于 2018-12-07T04:09:23.073 に答える