將組件注入 ng-container？ （從文件加載 ng-template）

Question

我正在嘗試在我的Angular應用程序中構建一個簡單的選項卡菜單。

parent.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>

parent.component.ts:

public selected = 1;
public selectTab(tabName) {
  this.selected = tabName;
}

這工作正常，只要<ng-template>是同一頁面 html 的一部分。 現在我的頁面（ #template1和#template2的內容）變得復雜，我想將它們移動到單獨的組件。

如何將組件注入<ng-container> ？

Answer 1

要將 Component 注入<ng-container> ，您不需要使用*ngTemplateOutlet ，而是使用*ngComponentOutlet 。

您可以在以下位置查看完整的 API： NgComponentOutlet

tab1.component.html：

<p>tab1 works!</p>

tab2.component.html：

<p>tab2 works!</p>

parent.component.html：

<div>
  <button (click)="selectTab(1)">Tab1</button>
  <button (click)="selectTab(2)">Tab2</button>

  <ng-container *ngComponentOutlet="activeTab">
  </ng-container>
</div>

parent.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,
    ...

Answer 2

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>