Angular2 在另一个组件内动态替换组件

Question

我正在尝试在其他具有自己 View 的组件中加载一个组件。将加载的组件将是动态的并基于某些条件。

我的意思是在父组件内的同一位置替换另一个组件。

例如，在我的 AppComponent.html(如下)中，我想加载组件，这些组件可以再次被具有某些事件的其他组件替换。

AppComponent.html

<button class="button1">Button1 </button>
<button class="button2">Button2 </button>
<placeHolder></placeHolder>

AppComponent.ts

@Component({
    selector: '...',
    templateUrl: 'resources/app.component.html'
})
export class AppComponent{
     //on click of the button1, I want to load component c1, and on click of button2, I want to load component c2
}

(c1 和 c2 只是任何其他组件)

如何做到这一点？非常感谢任何帮助。

Answer 1

如果要在<placeHolder>处装卸标签，那么 DCL (DynamicComponentLoader) 应该是适合你的东西

参见 Angular 2 dynamic tabs with user-click chosen components举个例子。