总的来说,我是 Angular 的新手,并且认真地开始使用 Angular 2,所以我想知道我是否没有以正确的方式考虑这个问题。
“面板”是我的应用程序中的一页内容。我想使用基本面板组件为从中派生的特定面板实现提供通用 UI 和功能。
我希望基本面板组件具有模板化内容,该内容包装派生组件提供的模板 - 例如,这将提供一个标准化的 header ,其内容由派生实现提供并允许子组件提供页面内容本身。
最终目标是让开发人员尽可能轻松地创建新面板,而不必担心渲染公共(public)部分,从而可以强制执行一致性。
此外,我希望开发人员能够在从派生组件以编程方式设置的基本变量/属性与父模板呈现的相应元素之间进行双向绑定(bind)...(除了自己的子模板中的元素)。
这可行吗?还是我在以错误的方式思考这个问题……不确定我是否处于 Angular 的心态。
由于我一直致力于此,我开始认为我可能需要调整以创建可重复使用的组件(如 PanelHeaderComponent),开发人员将在他们的面板实现中组合这些组件,而不是从通用 UI 的基础继承。 .. 但是,我确实需要以某种方式集中管理所有面板的容器。
想确保我这样做是正确的。谢谢!
最佳答案
正如您在上一段中所说,我认为一种有效的方法是将您的应用程序组件化。
基本上:为应用程序的不同部分创建可重用的组件(即:带有特定样式按钮的面板标题)
如果您希望不同的面板使用相同的标题,您可以在所有面板中重复使用该面板标题。
对于按钮和您要使用的任何其他控件,这将是类似的。定义您的组件,然后在各处重用它,然后重用您定义的可重用复合组件。
重要说明:到目前为止,据我所知,组件之间没有视觉继承,因此为了简化您的工作,您可能需要使用 sass 来定义样式并利用@imports 以实现 DRY。
关于javascript - Angular 2 中组件/视觉继承的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34517133/