angular动态加载组件_我如何使用Angular动态组件构建可自定义的加载指示器

angular动态加载组件

Recently, I wrote a blog post about creating a reusable loading-indicator component for Angular projects. The next step is making the indicator part customizable. But how exactly do you insert your component into the overlay? That is where dynamic components can help us.

最近，我写了一篇博客文章，内容涉及为Angular项目创建可重用的加载指标组件。 下一步是使指示器零件可定制。 但是，如何精确地将组件插入叠加层？ 这就是动态组件可以帮助我们的地方。

Note: Since my previous blog post, I have refactored some parts of the library. Feel free to check out the git repository.

注意： 自从上一篇博客文章以来，我已经重构了库的某些部分。 随时检查git存储库 。

The use-case is that we have a really easy to use loading-indicator. By default, it has a spinner, and it can be triggered using the library’s decorator methods. However, our end user wants only “Loading…” displayed on the overlay. We can copy the logic and then replace the spinner with the text itself, but that would be rather redundant.

用例是我们有一个非常易于使用的加载指示器。 默认情况下，它具有微调器，可以使用库的装饰器方法来触发它。 但是，我们的最终用户只希望在叠加层上显示“正在加载...”。 我们可以复制逻辑，然后用文本本身替换微调框，但这将是多余的。

In order to be able to use dynamic components, first, we need a simple decorator implemented. This decorator makes it possible to inject our own component into the template.

为了能够使用动态组件，首先，我们需要实现一个简单的装饰器。 这个装饰器可以将我们自己的组件注入模板。

import { Directive, ViewContainerRef } from