Внедрение компонента в ng-контейнер? (загрузить ng-шаблон из файла)
Я пытаюсь создать простое меню вкладок в моем приложении Angular.
parant.component.html:
<div>
<button (click)="selectTab(1)">Tab1</button>
<button (click)="selectTab(2)">Tab2</button>
<ng-container *ngTemplateOutlet="(selected == 1) ? template1 : template2">
</ng-container>
<ng-template #template1>I'm page 1</ng-template>
<ng-template #template2>I'm page 2</ng-template>
</div>
parant.component.ts:
public selected = 1;
public selectTab(tabName) {
this.selected = tabName;
}
Это работает нормально, пока <ng-template>
является частью той же страницы html. Теперь мои страницы (содержимое #template1 и # template2) становятся сложными, и я хочу переместить их в отдельные компоненты.
Как я мог внедрить компонент в <ng-container>
??
2 ответа
Чтобы ввести компонент в <ng-container>
, вам не нужно было использовать *ngTemplateOutlet
вместо этого используйте *ngComponentOutlet
.
Вы можете увидеть полный API по адресу: NgComponentOutlet
tab1.component.html:
<p>tab1 works!</p>
tab2.component.html:
<p>tab2 works!</p>
parant.component.html:
<div>
<button (click)="selectTab(1)">Tab1</button>
<button (click)="selectTab(2)">Tab2</button>
<ng-container *ngComponentOutlet="activeTab">
</ng-container>
</div>
parant.component.ts:
import { Tab1Component } from './tab1.component';
import { Tab2Component } from './tab2.component';
...
public activeTab = Tab1Component;
public selectTab(tabName) {
if (tabName == 1) {
this.activeTab = Tab1Component ;
}
else if (tabName == 2) {
this.activeTab = Tab2Component ;
}
}
И не забудьте добавить эти динамические компоненты в entryComponents
раздел.
app.module.ts:
import { Tab1Component } from './tab1.component';
import { Tab2Component } from './tab2.component';
...
@NgModule({
...
entryComponents: [
Tab1Component,
Tab2Component,
...
compnent-Templet1 и compnent-Templet2 - это имя компонента, который раньше был в ng-Templet, теперь вы помещаете их в компонент *
<ul>
<li *ngFor='let link of links'>
<ng-container
[ngTemplateOutlet]="link.type == 'complex' ?complexLink : simpleLink"
[ngTemplateOutletContext]="{link:link}">
</ng-container>
</li>
</ul>
<ng-template #simpleLink let-link='link'>
Simple : {{ link.name }}
<compnent-templet2 [input]="link.somevalue"></compnent-templet2>
</ng-template>
<ng-template #complexLink let-link='link'>
Complex : {{ link.name }}
<compnent-templet1 [input]="link.somevalue"></compnent-templet1>