初步了解Angular CDK
在本文中，我将介绍最近发布的Angular CDK中包含的一些功能。 具体来说，我将讨论Portal和PortalHost。
TL; DR：我使用最近发布的Angular CDK构建了一个简单的示例。 跳转到本文结尾的代码，或 访问Stackblitz中的工作演示 。
角材料CDK
只是一些介绍， 几天前 Angular Material团队发布了 Angular Component Development Kit。 我不会花太多的精力来解释CDK是什么，所以我在这里引用它们：
CDK的目标是为开发人员提供更多工具，以为网络构建出色的组件。 这对于希望利用Angular Material的功能而不采用Material Design可视语言的项目特别有用。 — 角队
因此，很明显，CDK由许多服务，指令，组件，类，模块等组成，以使我们在开发Angular组件时更轻松。 在当前的第一个版本中，它们包括可访问性，文本方向性，平台检测和动态组件实例化的功能。 在这篇文章中，我将专门讨论动态组件实例化 。 尚无文档，但您可以在此处查看代码。 CDK在@ angular / cdk npm软件包下发布。
我为什么还要考虑使用它？
CDK背后的人与Angular Material背后的人相同。 Angular Material团队的任务之一是为如何正确地在Angular中构建组件奠定良好的基础，同时考虑性能，a11y，i18n，可伸缩性等。因此，在解决了将近3k的问题后，确保他们对如何为网络构建良好的组件了解一两件事。 使用CDK是确保您将最佳实践包括在组件生产工作流程中的一种安全方法。
门户网站和PortalHost
我将尽力解释这两个在Angular Material库本身中大量使用的核心概念。 CDK源代码中有关于此主题的简短文档，您可以在此处访问。 简而言之，CDK公开了一个API，可让您通过门户网站和门户网站主机进行动态组件实例化。 这意味着您可以轻松地将Component或Templates注入到其他任何元素中，无论它是ng-template还是普通的DOM元素（例如document.body) 。 让我们分解Portal和PortalHost的概念。
门户： 您想要注入到其他任何地方的用户界面。 它可以是Component或TemplateRef。
PortalHost：您要呈现Portal的地方。 有一个特定的PortalHost实现，称为DOMPortalHost ，它基本上使您可以将Portal附加到Angular应用程序上下文之外的任意DOM元素，例如document.body 。
之前，我们跳进了如何在真实的场景中使用这些概念的例子，我建议您访问portal.ts的CDK源内实现这里 。 不要试图了解具体的实现细节（如果需要，可以这样做），而要看一看这些类及其方法。 您只需阅读它们的名称，即可快速掌握每个类和方法的功能。 这会让您对这些实用程序为您带来的好处有很好的感觉。
例
在此示例中，我们将构建一个简单的服务/组件，让我们显示完整的宽度/高度Loading…消息。 当您在多个屏幕中从API加载数据时，这确实非常方便。 以下代码段假定CDK已通过npm install @angular/cdk 。
我们将在文档的<body>中附加一个组件，因此，如果您可以首先看一下本文中的普通非CDK方法，那么下面的代码将更有意义。
组件
我们应该做的第一件事是使用Loading…消息创建一个组件。 它还可以具有微调器，阴影背景，淡入/淡出动画等。由于这不是本文的核心，因此我假设您已经知道如何执行此操作，并且在此跳过实现细节。 您应该注意的一件事是将组件添加到模块的 entryComponents 。 为了便于说明，我们将组件命名为LoadingSpinnerComponent 。
服务
这是我们应用本文中所学概念的地方。 我们将构建一个服务LoadingSpinnerService ，它公开两个简单的方法： reveal()和hide()分别显示和隐藏我们的加载微调器（duh）。
分解要点
我真的觉得代码几乎可以自我解释，但是无论如何我都会添加一些说明。 请按照摘要注释中的数字操作：
- 创建对Portal的引用：如前所述，门户是用于包含Component或TemplateRef的抽象。 在这种情况下，我们将使用之前创建的
LoadingSpinnerComponent构建一个Portal。 - 创建对PortalHost的引用：我们将使用
document.body注入我们的组件。 所以我们用我们选择一个DOM元素作为主机的锚DomPortalHost实施PortalHost。 - 注入依赖项：
DomPortalHost需要这些依赖DomPortalHost来构建PortalHost。 如果您想了解CDK如何处理所有这些依赖关系，请访问本文 ，我将详细介绍所有这些详细信息。 - 创建Portal：
Portal抽象类有两种实现：ComponentPortal和TemplatePortal。 之所以使用前者作为构造函数，是因为我们要基于LoadingSpinnerComponent创建一个Portal。 - 创建PortalHost：与第4点相同，我们使用构造函数基于DOM元素
<body>构建PortalHost。 如果您想知道为什么我选择document.body来附加组件，原因很简单：加载微调器是一个组件，应该放置在屏幕上任何其他元素的顶部，我们不想处理如果放置在任何其他元素内，则会出现堆叠问题。 此外，它可以作为对话框使用，因此从体系结构上讲，它不应该属于任何组件的后代。 - 显示微调器：只需将其附加到PortalHost即可显示该组件。 就那么简单。
- 隐藏微调器：通过简单地从PortalHost分离组件来隐藏组件。 就那么简单。
工作演示（归功于 Gethin Oakes ）： https : //stackblitz.com/edit/angular-cdk-portal-basic 。
我希望这篇文章能激发您去使用新的Angular CDK的乐趣。 Angular Material团队肯定会在接下来的几周内向CDK添加更多功能，敬请期待。
如果您喜欢这个，请表达爱意和分享。 通过Twitter @ caroso1222与我联系 。
From: https://hackernoon.com/a-first-look-into-the-angular-cdk-67e68807ed9b