javascript - 将组件注入(inject) ng-container？ (从文件加载 ng-template)

Question

我正在尝试在我的 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 的内容)变得复杂，我想将它们移动到单独的组件中。

如何将组件注入(inject) <ng-container> ??

Answer 1

将组件注入(inject) <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,
    ...