首先你的第二个问题。
是的,可以使用 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 环境中工作,但我认为值得一提。