Question

在下面的示例中，我像下面一样使用了ng-template，它工作正常。

示例链接：click here

<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：sample 2

ref stackoverflow问题：angular2 ng-template in a separate file

Answer 1

您可以为模板提供一个组件（将其命名为tplComponent），并在其中创建所需数量的模板。然后在其他组件中，获取tplComponent的实例并从中获取模板。这是一个question，其中包含这种方法的示例（不过我没有尝试过）。

请让我知道是否可行。

Answer 2

您可以使用* ngTemplateOutlet对其进行存档

请参考下面的链接

ngTemplateOutlet

Answer 3

我从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>

示例链接sample click me

如何在单独的文件中加载ng-template？

3 个答案: