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

标签 javascript angular inheritance angular2-directives

总的来说,我是 Angular 的新手,并且认真地开始使用 Angular 2,所以我想知道我是否没有以正确的方式考虑这个问题。

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

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

最终目标是让开发人员尽可能轻松地创建新面板,而不必担心渲染公共(public)部分,从而可以强制执行一致性。

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

这可行吗?还是我在以错误的方式思考这个问题……不确定我是否处于 Angular 的心态。

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

想确保我这样做是正确的。谢谢!

最佳答案

正如您在上一段中所说,我认为一种有效的方法是将您的应用程序组件化。

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

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

对于按钮和您要使用的任何其他控件,这将是类似的。定义您的组件,然后在各处重用它,然后重用您定义的可重用复合组件。

重要说明:到目前为止,据我所知,组件之间没有视觉继承,因此为了简化您的工作,您可能需要使用 sass 来定义样式并利用@imports 以实现 DRY。

关于javascript - Angular 2 中组件/视觉继承的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34517133/

相关文章:

javascript - 如何通过 onRowSelect ajax 事件调用 jQuery?

Angular 7 拖放 - 动态创建拖放区

node.js - 卡在 npm install at fechMetadata 检查可安装状态

javascript - TypeScript 工厂模式表示属性不存在

javascript - 需要折线图下方的颜色纯html和css

javascript - 使用 Ajax 预编译 PHP 函数

java - facebook graph api 调用使用 servlet 发布图像

javascript - Angular 7、Ngrx、ExpressionChangedAfterItHasBeenCheckedError

java - 将 API 类转换为继承类

java - 如何在main方法中访问A类的print方法? main方法中创建的对象a和b有什么区别?