Angular 2中组件/视觉继承的最佳方法?

时间:2015-12-29 18:47:16

标签: javascript angular inheritance angular2-directives

我是Angular的新手并且从Angular 2开始认真开始,所以我想知道我是不是以正确的方式思考这个问题。

“面板”是我的应用程序中的内容页面。我想使用基本面板组件为从中派生的特定面板实现提供通用UI和功能。

我希望基本面板组件具有包装派生组件提供的模板的模板化内容 - 例如,这将提供标准化的标头,其内容由派生实现提供并允许子组件提供页面内容本身。

最终目标是让开发人员尽可能轻松地创建新面板,而无需担心渲染公共部分,从而可以实现一致性。

另外,我希望开发人员能够在从派生组件以编程方式设置的基本变量/属性与父模板呈现的相应元素之间进行双向绑定...(除了他们自己的孩子模板中的元素)。

这可行吗?或者我是以错误的方式思考这个问题......不确定我是否处于Angular状态。

正如我一直在研究的那样,我开始认为我可能需要调整以创建可重用的组件(如PanelHeaderComponent),开发人员将在其面板实现中编写这些组件,而不是从公共UI的基础继承。 ..但是,我确实需要以某种方式集中管理所有面板的容器。

我想确保以正确的方式做到这一点。谢谢!

1 个答案:

答案 0 :(得分:2)

我认为,正如您在上一段中所述,有效的方法是对您的申请进行组件化。

基本上:为应用程序的不同部分创建可重用的组件(即:带有某种样式的按钮的面板标题)

如果您想要使用相同标题的不同面板,则可以在所有面板中重复使用该面板标题。

对于按钮以及您要使用的任何其他控件,它都是类似的。定义组件,然后在任何地方重用它,然后重用您定义的可重用的复合组件。

重要提示:截至目前,据我所知,组件之间没有可视化继承,因此为了简化您的工作,您可能需要使用sass来定义样式并利用@imports来干。