8

我的团队处理多个 Angular 项目。对于代码重用，我们将许多表示组件提取到库中，然后在我们的各种项目中使用。

那么，鉴于我们所有的项目都是关于 Angular 的，并且我们已经使用了库，我们还能从 Angular 元素中获得什么？

我开始研究元素的原因是：

我们的大多数旧项目都在使用 Bootstrap 3。我们希望将 Bootstrap 4 与我们制作的新东西一起使用。所以我想知道一个元素是否可以用 Bootstrap 4 设计，并在用 B-3 设计的地方使用它而不会破坏？

那可能吗 ？

4

1 回答 1

5

首先你的第二个问题。
是的，可以使用 Bootstrap 4 设计新元素。这是 Web 组件（Angular Elements）的好处之一，您可以在阴影树中获得样式封装。

如果你的目标是创建真正独立的元素，那么缺点是你必须在每个 Angular 元素中包含 Boostrap。

出于好奇，我创建了一个新的 Angular 项目 ( ng new)，从中创建了一个包含 Boostrap 4 的 Angular Element，并使用 Webpack Bundle Analyzer 检查了大小。

角元素

All        (206.61 KB)  
main.js    (193.33 KB)  
scripts.js (13.29 KB)

这包括使用 Zone.js 导入创建的 Angular 项目ng new（因为如果您不想使用noop zone ，则需要自包含元素才能工作）并使用ngx-build-plus 构建。

Angular Element + Bootstrap 4（仅 min.css）

All        (418.74 KB)  
main.js    (405.46 KB)  
scripts.js (13.29 KB)

这将产生相当多的开销。当然可以在元素之间共享样式，但这会增加复杂性。

如果您使用 Angular Elements，这会导致您可以期待的事情

临：

  • 如果您比较官方弹出服务示例，您将看到您得到

    Angular 应用中的简单动态内容

  • 原生风格封装 - 您现在可以使用encapsulation: ViewEncapsulation.ShadowDom
  • （也许以后可以加载依赖于不同 Angular 版本的不同元素——这是计划好的，但现在不可能！）

魂斗罗

我不完全确定是否真的没有好的方法可以将 Angular Elements 与库功能一起使用，但目前我不知道。也许有人会在这里提出一个好主意。

  • 整体包大小将增加
    目前您必须将整个 Angular 框架（至少是不会让树动摇的部分）捆绑到您的 Angular 元素中。nx-build-plus 再次为您提供救援并帮助共享元素之间的依赖关系，但这种方式不受官方支持（但 ngx-build-plus 的作者正在为 Angular 团队开发一个实现）。因此，您可以期待这一点会在即将发布的 Angular 版本中得到改善（但不会消失）（尤其是在Ivy即将登陆时）。根据您解决导入问题的方式，其他依赖项（如 Bootstrap）会增加此问题（如上所示）。

  • 如果您必须支持 IE 11
    ，您将在支持（和包大小）方面遇到更多问题，因为所有 Web 组件（Angular 元素）功能都必须进行填充。

  • 构建变得更加困难（至少目前如此）。
    如上所述，库中尚不支持 Angular Elements，如果有解决方案，则需要一些手动配置。
    此外，Angular 目前不支持“外部”Angular 元素（即 Angular 上下文之外的元素）。虽然可以手动创建它们或使用 ngx-build-plus 之类的工具（恕我直言，目前最好的方法）

最后一点对您的团队来说可能不是问题，因为您提到您只在 Angular 环境中工作，但我认为值得一提。

于 2019-04-02T09:35:00.330 回答