问题
In below sample, I have used ng-template
like below and it is working fine.
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>
But I want to create a new file for ng-template
content and I want to use it in another file. I have tried like below but not working. Please help me find a solution for this case.
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 stackoverflow question: angular2 ng-template in a separate file
回答1:
You can have a component for your templates (name it tplComponent
) and inside that, create as many templates as you want. Then in other components, get an instance of tplComponent
and get the template from that. Here is a question that has an example of this approach (I haven't tried that though).
Please let me know if that works.
回答2:
You can use *ngTemplateOutlet to archive the same
Please refer the link below
ngTemplateOutlet
回答3:
i got an answer for this question from github angular please check this https://github.com/angular/angular/issues/27503
Answer:
step1:
i have initialized my template as a new component as like below
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;
}
Then i have used that component template in my parent component as like below
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
来源:https://stackoverflow.com/questions/53645174/how-to-load-the-ng-template-in-separate-file