如何在单独的文件中加载 ng-template?
How to load the ng-template in separate file?
在下面的示例中,我使用了如下所示的 ng-template
,它工作正常。
Sample link: 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>
Sample 2: sample 2
ref Whosebug question: angular2 ng-template in a separate file
您可以为模板创建一个组件(将其命名为 tplComponent
),并在其中创建任意数量的模板。然后在其他组件中,获取 tplComponent
的实例并从中获取模板。这是一个 question,其中包含这种方法的示例(不过我还没有尝试过)。
如果可行,请告诉我。
您可以使用 *ngTemplateOutlet 来归档相同的内容
请参考下面的link
我从 github angular 那里得到了这个问题的答案
请检查这个 https://github.com/angular/angular/issues/27503
答案:
step1:
我已经将我的模板初始化为一个新组件,如下所示
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 link sample click me
我认为您不应该使用那样的模板。只需创建一个经典组件,如果您需要模板引用,请将其包装在 ng-template
.
中
在下面的示例中,我使用了如下所示的 ng-template
,它工作正常。
Sample link: 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>
Sample 2: sample 2
ref Whosebug question: angular2 ng-template in a separate file
您可以为模板创建一个组件(将其命名为 tplComponent
),并在其中创建任意数量的模板。然后在其他组件中,获取 tplComponent
的实例并从中获取模板。这是一个 question,其中包含这种方法的示例(不过我还没有尝试过)。
如果可行,请告诉我。
您可以使用 *ngTemplateOutlet 来归档相同的内容
请参考下面的link
我从 github angular 那里得到了这个问题的答案 请检查这个 https://github.com/angular/angular/issues/27503
答案:
step1:
我已经将我的模板初始化为一个新组件,如下所示
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 link sample click me
我认为您不应该使用那样的模板。只需创建一个经典组件,如果您需要模板引用,请将其包装在 ng-template
.