Angular 4 - 处理通用组件的样式或使用特定组件

时间:2017-09-20 00:46:58

标签: javascript angular

我正在开发一个混合应用程序,我需要一个工具栏。这个工具栏必须处理不同的形式和功能,在某些情况下包含标题,其他按钮和链接,在其他情况下包含自动完成,那么我的问题是如果更有效地构建一个接受所有这些元素或在不同工具栏上工作的动态组件将根据需要插入和删除DOM。

谢谢!

2 个答案:

答案 0 :(得分:1)

动态工具栏会更快,因为角度不需要在每次更改时重新渲染整个工具栏。只需找到需要更新的东西就足够聪明了。

此外,我认为它会使您的代码更易于维护。拥有多个工具栏,可能带有一些共享的逻辑/元素会导致重复的代码。

此外,您可能会使用动态工具栏减少代码行数,这可能会略微减少项目的大小。我怀疑这不重要。老实说,我认为最大的优势不仅仅是速度,而是更清晰,更易于维护的代码。

答案 1 :(得分:0)

这取决于您是使用延迟加载还是将整个应用程序捆绑在一个main.bundle.js中 在第一种情况下,您希望根据需要将严格的最小值发送到浏览器。因此,您需要为每个用例单独组件。 在第二种情况下,它使您的应用程序在单个组件上创建更轻,以处理不同的工具栏用例。

为了证明这一点,(假设您没有使用延迟加载),您可以使用主要组件创建一个小项目,该组件使用2个不同的视图。 在一种情况下,您为每个视图创建一个组件。 在另一个组件中,您将两个视图组合在一个组件中。

然后构建并提供两者,您可以看到JS文件重量的差异。

希望这有帮助