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 回答