直流分量和定时分量_角分量门户

最新推荐文章于 2023-03-17 17:25:50 发布

weixin_26723981

最新推荐文章于 2023-03-17 17:25:50 发布

阅读量902

点赞数

原文链接：https://medium.com/@anthony_miller/angular-component-portals-28ddd860c22c

版权

直流分量和定时分量

There has been much talk and hype around Angular Ivy, with it being hailed as the saviour for many things that will come to Angular ecosystem of the future, this includes to be able to lazily load an individual component at runtime using the import syntax without the need of a NgModule itself.

围绕Angular Ivy进行了很多讨论和炒作，它被誉为未来Angular生态系统中许多事情的救星，其中包括能够使用导入语法在运行时懒加载单个组件，而无需使用需要NgModule本身。

this.foo = await import(`./foo.component`)
 .then(({ FooComponent }) => FooComponent);

Netanel Basal wrote an excellent post on this topic covering all the in’s and out’s on lazy loading individual components and how to use them (see link below).

Netanel Basal在该主题上写了一篇很棒的文章，内容涉及延迟加载各个组件以及如何使用它们的所有内容(请参见下面的链接)。

Why do we want this at all? What’s all the fuss?

为什么我们要这个呢？有什么大惊小怪的？

If you take the dashboard of a typical administration application. There are many differing aspects mostly displaying of analytical data to the user and each one of these panels can be components from various modules, but how to load these on demand or even how can the panel be customised by the end user themselves and dynamically loaded.

如果使用典型管理应用程序的仪表板。有许多不同的方面，主要是向用户显示分析数据，这些面板中的每个面板都可以是来自各个模块的组件，但是如何按需加载这些面板，甚至最终用户自己如何定制面板并动态加载面板。

Loading a dashboard via the Angular routing isn’t possible for these types of scenarios, as the dashboard would be on a single route notable /home or /dashboard.

对于这些类型的方案，无法通过Angular路由加载仪表板，因为该仪表板将位于单个路由上，尤其是/ home或/ dashboard 。

But what if you could lazily load a NgModule and instantiate any component inside the module without a direct reference to the component type?

但是，如果您可以延迟加载NgModule并实例化模块内的任何组件而无需直接引用组件类型怎么办？

组件门户介绍 (Introducing Component Portals)

Component Portals provides the ability to instantiate any component by using a string identifier and the component is magically materialised. Well maybe not magically but you get my drift.

组件门户网站提供了使用字符串标识符实例化任何组件的功能，并且该组件被神奇地实现了。好吧，也许不是那么神奇，但是你让我流连忘返。

This pattern can be easily sprinkled into any existing application with little effort, well almost.

几乎可以毫不费力地将这种模式轻松地散布到任何现有应用程序中。

Component Portals was inspired in part by Wes Grimes (see link below) and it has taken me some to get this published for use as public npm package and best of all it doesn’t even require Angular Ivy, the current ViewEngine works perfectly fine.

Component Portals的部分灵感来自Wes Grimes(请参阅下面的链接)，我花了一些心思才将其发布为公共npm软件包，最重要的是它甚至不需要Angular Ivy，目前的ViewEngine可以很好地工作。

让我们开始吧 (Let’s get started)

Firstly we need to install the component portal library that does all the heavy lifting of component register. Install the library using the following command:

首先，我们需要安装执行所有繁重的组件注册的组件门户库。使用以下命令安装库：

npm install @codethatstack/portals

Once installed, import the CtsPortalsModule into applications root NgModule:

安装后，将CtsPortalsModule导入应用程序根目录NgModule：

注册组件 (Registering Components)

Create and register any component as you normally would with a NgModule:

像往常一样使用NgModule创建和注册任何组件：

Next step is register the component with ComponentRegistry:

下一步是使用ComponentRegistry注册组件：

This step is important, this is the magical glue that binds the Component Type and NgModule to the string component identifier. This only registers the concrete component type, now we need to stitch this together in the root NgModule.

这一步很重要，这是将Component Type和NgModule绑定到字符串组件标识符的神奇粘合剂。这仅注册具体的组件类型，现在我们需要在根NgModule中将其缝合在一起。

注册门户网站模块 (Registering Portal Modules)

Define a module identifier (moduleId) for each NgModule that will be lazy loaded. This uses same syntax as lazy loading child routes.

为每个将延迟加载的NgModule定义一个模块标识符(moduleId)。这使用与延迟加载子路由相同的语法。

Next register the PortalModules using the injection token PORTAL_MODULE_TOKEN.

接着注册PortalModules使用注射令牌PORTAL_MODULE_TOKEN 。

注册门户组件 (Registering Portal Components)

Define each component using their string identifier’s as defined above linking it to the module identifier above.

使用上面定义的字符串标识符定义每个组件，并将其链接到上面的模块标识符。

By separating out the module loading definition this avoids duplication when registering many components for the same NgModule.

通过分离模块加载定义，可以避免在为同一NgModule注册许多组件时进行重复。

Next is to register the PortalComponents using the injection token PORTAL_COMPONENTS_TOKEN.

接下来是注册PortalComponents使用注射令牌PORTAL_COMPONENTS_TOKEN 。

Wow that was a lot of plumbing work.

哇，这是很多水暖工作。

预备，准备，开始 (Ready, Set, Go)

To instantiate a component anywhere inside your application use the directive ctsComponentPortal, specifying the component’s string identifier name.

要在应用程序内的任何地方实例化组件，请使用指令ctsComponentPortal ，指定组件的字符串标识符名称。

That’s it! The module will be loaded and the component instantiated inside the current ViewContainer.

而已！ 该模块将被加载，并且组件将在当前ViewContainer内部实例化。

If needed you can even hook into the activated and deactivated events to handle any additional logic.

如果需要，您甚至可以加入已激活和已禁用的事件，以处理任何其他逻辑。

奖金 (Bonus)

I was recently introduced to the concept of Teleporting by Nir Kaufman. The concept is very straight forward. Register an outlet within your application and then attach a template to that outlet, however with Component Portals it will be a component instead.

最近，尼尔·考夫曼 ( Nir Kaufman)向我介绍了隐形运输的概念。这个概念非常简单。在您的应用程序中注册一个插座，然后将模板附加到该插座，但是对于组件门户，它将代替一个组件。

在应用程序内部的某个地方注册门户出口，以提供唯一的名称。

Then use the property ctsComponentPortalAttachTo to specify which outlet the component will be attached to.

然后，使用属性ctsComponentPortalAttachTo指定组件将连接到哪个插座。