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内容创建一个新文件，并且想在另一个文件中使用它。我已经尝试过如下但不工作。请帮我找到这个案例的解决方案。

模板.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>

默认.html

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

样品 2：样品 2

参考 stackoverflow 问题：angular2 ng-template 在一个单独的文件中

4

4 回答 4

12

我从 github angular 得到了这个问题的答案，请检查这个https://github.com/angular/angular/issues/27503

回答：

步骤1：

我已将我的模板初始化为一个新组件，如下所示

模板.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;
}

然后我在我的父组件中使用了该组件模板，如下所示

默认.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 回答
2

您可以为您的模板创建一个组件（命名它tplComponent），并在其中创建任意数量的模板。然后在其他组件中，获取一个实例tplComponent并从中获取模板。这是一个带有这种方法示例的问题（尽管我没有尝试过）。

请让我知道这是否有效。

于 2018-12-06T06:59:59.210 回答
2

您可以使用 *ngTemplateOutlet 来归档相同的

请参考以下链接

ngTemplateOutlet

于 2018-12-06T07:10:58.783 回答
0

我不认为你应该是这样的模板。只需创建一个经典组件，如果您需要模板引用，请将其包装在ng-template.

于 2021-12-01T15:05:04.463 回答