我正在使用Angular 2(和TypeScript)构建一个模态组件,其中包含不同的视图/页面。它不会有选项卡,但概念非常相似。基本上,我正在努力找到一种处理这个问题的方法。
在我的模态组件内部,我想要输出不同的视图/页面。每个页面都应该是一个单独的组件,因为它们没有任何共同的标记。此外,它们将从服务类中获取数据,因此我需要能够为每个视图编写特定的逻辑。
基本上,我想要的是这样的东西:
// Within my modal component's template
<div *ngFor="#view of views">
// Render view component here
</div>
在这里,views
可以是组件的数组。我的首要问题是我不确定如何输出我的视图(组件)的集合。
我应该如何在一个组件中输出多个子组件呢?
此外,我需要一种方法来隐藏和显示这些视图,因为这是它们唯一共同的特点。我考虑给视图添加一个isActive
变量,并根据此变量来显示/隐藏它们。将实现ModalView
接口或从基类继承以添加该逻辑是否是实现视图组件的不良实践?从我的模态窗口组件中,我希望能够控制显示哪个视图,所以我需要这些视图有这个逻辑的共同点。
希望我的意图已经表达清楚了。解决方案可能很简单,但现在我有点困惑怎么做。如果有代码示例会更加感激!
@Output()
将引用发送回父组件,通过发射(ref: ComponentRef)
并在模态框中收集它们。 - SasxaDynamicComponentLoader
的解决方案? - cocoseis