[
6月14日
-
5分钟阅读
[
拯救
如何在Angular中使用Web组件
Web组件使我们能够完全独立于前端框架来开发。
原始照片：Cytonn PhotographyfromPexels
许多开发者对Web组件消灭前端框架和库的想法感到威胁。这不会发生，因为这两种技术解决了不同的问题。但是，将它们结合起来才是真正的成功秘诀。
大多数使用Angular的人都不使用Web Components，但你可能想使用。
在我们深入研究我们的例子之前，让我们看看Web Components和Angular的目的。
Web组件的目的
Web组件是基于官方网络标准的可重复使用的客户端组件，并得到所有主要浏览器的支持。它们是封装 功能的一种很好的方式， ，与我们的代码的其他部分分开。不仅如此，你还可以在每个网络应用程序和网页中重复使用 它们。
它们的目的是编写强封装的自定义元素，以便到处使用。网络组件使我们能够完全独立于前端框架来开发。
网络组件的主要好处是我们可以到处使用它们。使用任何框架，甚至没有框架也可以。- vuejs.org
Angular的目的
Web Components为可重用的组件提供了强大的封装，而Angular则提供了一个声明式的库，使DOM与你的数据保持同步。
与Web Components的主要区别在于，我们只能在Angular应用程序中使用Angular组件。而另一方面，Web组件可以在任何地方使用。我们可以在React、Vue、Angular或任何其他网络应用中使用它。
作为一个开发者，你可以自由地在你的Web Components中使用React，或者在React中使用Web Components，或者两者都使用。- https://reactjs.org
当你的组件需要处理大量需要传递给子组件的数据时，Angular或任何其他前端框架都是不错的选择。
[
网络组件会取代前端框架吗？
它们是为了解决不同的问题而建立的。
medium.com
构建一个Web组件
让我们继续建立我们的第一个Web组件，我们将把它集成到Angular应用程序中。
我们将保持简单，创建一个毫不费力的自定义元素。如果你对构建更复杂的Web组件感兴趣，请阅读我的系列文章。The Complete Web Component Guide.
下面是我们的hello-world 自定义元素的JavaScript代码。
在我们的HTML中加载了这些JavaScript代码，我们可以很容易地包括我们的组件，就像这样。
<hello-world></hello-world>
这将显示我们的 "**Hello World！"**标题。自己试试吧。这里是CodePen。
在Angular中集成一个Web组件
让我们把我们的Web组件包含在一个正在运行的Angular应用程序中。为了方便起见，我们将去Stackblitz上的一个Angular启动项目。之后，我们创建一个文件hello-world.js ，并把上面的Web组件的代码放在里面。
[
你不需要React来创建一个可重用的按钮!
用Web组件代替
javascript.plainenglish.io
](javascript.plainenglish.io/you-dont-ne…)
接下来，我们进入Angular组件，导入我们的Javascript文件，包括我们Web组件的代码。
import ./hello-world
并将我们的自定义元素传递给我们的模板。
app.component.html
当保存我们的修改时，我们的组件还没有显示出来，我们得到的错误是 "'hello-world'不是一个已知的元素":
'hello-world'不是一个已知的元素
在这种情况下，Angular的错误信息是相当不错的。它为我们提供了两个选项。当阅读第二个选项时，我们可以得出，当使用Web Components时，我们需要将CUSTOM_ELEMENTS_SCHEMA 添加到@NgModule.schemas 。因此，让我们去我们的app.module.ts 文件，从@angular/core 中导入CUSTOM_ELEMENTS_SCHEMA ，并将其添加到schemas 阵列中。
CUSTOM_ELEMENTS_SCHEMA in app.module.ts
然后，瞧瞧!预览中显示了我们的Web组件。我们成功地将一个自定义元素集成到Angular中。下面是 最后的Stackblitz 的例子。
最后的思考
在Angular中使用Web组件很容易。构建可在整个前端框架中使用的可重复使用的组件会带来很多好处。我们已经了解到，在创建可重复使用的组件时，我们应该使用Web Components，以便在任何地方使用。当涉及到处理大量的数据时，Angular是个好办法。
我希望你喜欢阅读这篇文章。我总是很乐意回答问题，也愿意接受批评。欢迎在任何时候联系我😊
如果你想支持我的写作。 成为Medium会员.如果你这样做，我将得到一个小的佣金。谢谢!
[
用我的推荐链接加入Medium - Marius Bongarts
作为Medium会员，你的部分会员费将用于你所阅读的作家，而且你可以完全接触到每个故事...
medium.com
关注我，不要错过我的下一篇文章。我写的内容包括：Typescript、Web Components、Frontend Frameworks、Software Design Patterns、Chrome Extensions，以及更多的主题🙏
关于我
我是埃森哲互动公司的一名软件工程分析师。我喜欢创造有价值的内容和产品，使人们的生活更轻松。比如说 网络亮点Chrome扩展可以让你在浏览器中访问的每一个页面或PDF上突出显示文本。你可以提供标签来分组你的研究，并非常容易地重新找到它。你所有的亮点都会同步到web-highlights.com上的相应网络应用。看看吧!
[
网络亮点 - PDF和网络亮点
在每个网站或PDF上创建亮点、书签、标签和文件夹。将您的想法和研究组织成一个有条理的结构。
chrome.google.com
](chrome.google.com/webstore/de…)
进一步阅读
[
用网络组件建立你自己的博客组合。基础知识
第1部分：自定义元素、阴影DOM和HTML模板
medium.com
[
如何用Web组件建立一个Medium文本高亮显示的Chrome扩展？
我一直很喜欢Medium的荧光笔，它在选择文章中的文本时出现。我想，这将是一件好事...
medium.com
[
完整的网络组件指南。自定义元素
成为未来网络开发的专家（第一部分）
medium.com
[
高级TypeScript与代码挑战。Type Guards
学习TypeScript的高级特性并将其应用于实际的代码练习。
medium.com
