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

我对Angular基本上是新手，从Angular 2开始认真学习，所以我想知道我是否还没有正确地思考这个问题

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

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

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

此外，我希望开发人员能够在从派生组件以编程方式设置的基本变量/属性和由父模板呈现的相应元素之间进行双向绑定。。。（除了它们自己的子模板中的元素之外）

这可行吗？还是我的想法不对。。。我还不确定我是否处于一种精神错乱的状态

在我一直致力于此的过程中，我开始认为我可能需要调整以创建可重用组件（如PanelHeaderComponent），开发人员将在其面板实现中组合这些组件，而不是从通用UI的基础上继承。。。但是，我确实需要以某种方式集中管理所有面板的容器

---

我想确定我做这件事的方法是正确的。谢谢

我认为一种有效的方法是，正如您在最后几段中所说的，将应用程序组件化

基本上：为应用程序的不同部分创建可重用组件（即：带有特定样式按钮的面板标题）

如果需要使用相同标题的不同面板，则可以在所有面板中重用该面板标题

它与按钮和任何其他您想要使用的控件类似。定义您的组件，然后在任何地方重用它，然后重用您定义的可重用复合组件

重要提示：就我所知，到目前为止，组件之间没有可视继承，因此为了简化您的工作，您可能需要使用sass来定义样式，并利用@imports进行干燥