angular - Angular 2 以组件为属性的共享组件

Question

我有一个可以显示切换按钮的共享组件，此切换按钮可让您在两个子组件之间切换，这两个组件必须作为调用 SharedComponent 的父级的输入传递。请问有什么想法吗？

Answer 1

我认为 ngComponentOutlet 就是你要找的东西： https ://angular.io/api/common/NgComponentOutlet

然后，您可以执行以下操作：

<a (click)="doSwitch()">Switch</a>
<ng-container *ngComponentOutlet="component1"></ng-container>
<ng-container *ngComponentOutlet="component2"></ng-container>

在打字稿中：

Input()
component1: Type<any>;

Input()
component2: Type<any>;

...

使用组件时：

<switch-component [component1]="comp1" [component2]="comp2"></switch-component>

comp1: Type = ParentComponent1;
comp2: Type = ParentComponent2;