Angular2在另一个组件内部动态替换组件 [英] Angular2 replacing component dynamically inside another component

问题描述

我正在尝试将一个组件加载到其他具有自己视图的组件中.将要加载的组件将是动态的，并基于某些条件.

I am trying to load a component in some other component which has its own view. The component that will be loading will be dynamic and based on some condition.

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

What I mean is replacing another component at same place inside the parent component.

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

For instance, In my AppComponent.html (below) I would like to load components which can again be replaced by some other component with some events.

AppComponent.html

AppComponent.html

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

AppComponent.ts

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只是任何其他组件)

(c1 and c2 are just any other component)

如何执行此操作?任何帮助都将受到高度赞赏.

How to do this ? Any help is highly appreciated.

推荐答案

如果要在<placeHolder>标记处进行加载和卸载，则DCL(DynamicComponentLoader)应该是您的正确选择

If you want to load and unload at the <placeHolder> tag, then DCL (DynamicComponentLoader) should be the right thing for you

请参阅带有用户单击所选组件的Angular 2动态选项卡作为示例.

这篇关于Angular2在另一个组件内部动态替换组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！