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 '@angular/core';@Directive({selector: '[btpIndicatorHost]',
})
export class IndicatorHostDirective {constructor(public viewContainerRef: ViewContainerRef) { }
}

We have to add this directive to our library’s NgModule. Then replace the spinner component inside the loading-indicator template with the following:

我们必须将此指令添加到我们库的NgModule中。 然后，用以下内容替换装入指示器模板中的微调器组件：

<btp-overlay><div class="btp-loading-indicator__container" [style.width]="indicatorSize" [style.height]="indicatorSize"><ng-template btpIndicatorHost></ng-template></div>
</btp-overlay>

Now that we have this template, we need to do 3 things in the loading-indicator component.

现在我们有了这个模板，我们需要在loading-indicator组件中做三件事。

1. Inject the ComponentFactoryResolver into the component.
   将ComponentFactoryResolver注入组件。
2. Use the @ViewChild decorator to get our indicator-host.
   使用@ViewChild装饰器获取我们的指标宿主。
3. Load the provided component.
   加载提供的组件。

import {Component, ComponentFactoryResolver, ComponentRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {LOADING_INDICATOR_CONFIG} from '../loading-indicator.config';
import {LoadingIndicatorConfig} from '../interfaces/loading-indicator.interfaces';
import {IndicatorHostDirective} from '../directives/indicator-host.directive';
import {SpinnerComponent} from '../spinner/spinner.component';
import {DEFAULT_SIZE, INDICATOR_COLOR} from '../constants/indicator.constants';@Component({selector: 'btp-loading-indicator',templateUrl: './loading-indicator.component.html',styleUrls: ['./loading-indicator.component.css']
})
export class LoadingIndicatorComponent implements OnInit, OnDestroy {@ViewChild(IndicatorHostDirective)host: IndicatorHostDirective;constructor(@Inject(LOADING_INDICATOR_CONFIG)private config: LoadingIndicatorConfig,private componentFactoryResolver: ComponentFactoryResolver) {}get indicatorSize(): string {return `${this.config.size}px`;}ngOnInit(): void {this.loadComponent();}ngOnDestroy(): void {this.host.viewContainerRef.clear();}private loadComponent() {const component = this.config.indicatorComponent || SpinnerComponent;const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component as any);const viewContainerRef = this.host.viewContainerRef;viewContainerRef.clear();const componentRef: ComponentRef<any> = viewContainerRef.createComponent(componentFactory);componentRef.instance.color = this.config.color || INDICATOR_COLOR;componentRef.instance.size = this.config.size || DEFAULT_SIZE;}
}

We need to load the component in the OnInit lifecycle hook. The OnInit hook runs after the first ngOnChanges(), and it is called only once. It is the ideal place to load a component dynamically into the DOM. We also need to clear the viewContainer reference during component destroy.

我们需要将组件加载到OnInit生命周期挂钩中。 OnInit挂钩在第一个ngOnChanges()之后运行，并且仅被调用一次。 这是将组件动态加载到DOM的理想场所。 我们还需要在组件销毁期间清除viewContainer引用。

ngOnInit(): void {this.loadComponent();}ngOnDestroy(): void {this.host.viewContainerRef.clear();}

Let’s examine our ‘loadComponent’ method a little bit further. We want to provide our custom components using our configuration logic. When a custom component is not provided in the config, our indicator will be the default spinner component.

让我们进一步研究一下“ loadComponent”方法。 我们希望使用我们的配置逻辑来提供自定义组件。 当配置中未提供自定义组件时，我们的指标将是默认的微调器组件。

private loadComponent() {const component = this.config.indicatorComponent || SpinnerComponent;const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component as any);const viewContainerRef = this.host.viewContainerRef;viewContainerRef.clear();const componentRef: ComponentRef<any> = viewContainerRef.createComponent(componentFactory);componentRef.instance.color = this.config.color || INDICATOR_COLOR;componentRef.instance.size = this.config.size || DEFAULT_SIZE;}

Then we use the componentFactoryResolver, to get the component’s factory. To be on the safe side, we clear our ViewContainerRef first. Then we create the component using the resolved factory, and we set our config values on the created instance.

然后，我们使用componentFactoryResolver来获取组件的工厂。 为了安全起见，我们首先清除ViewContainerRef。 然后，我们使用已解析的工厂创建组件，并在创建的实例上设置配置值。

Our end-user wants only a small text instead of a fancy spinner. A rather simple component would look like the following:

我们的最终用户只需要一小段文字，而不是精美的微调框。 一个相当简单的组件如下所示：

import {Component} from '@angular/core';@Component({selector: 'app-loading-message',template: `<h1>Loading...</h1>`,styles: [``]
})
export class LoadingMessageComponent {
}

We provide it in our app’s main module, where we set up and configure our library. Adding the component into the ‘entryComponents’ array makes it sure that its factory can be resolved during loading.

我们在应用程序的主模块中提供它，我们在其中设置和配置我们的库。 将组件添加到“ entryComponents”数组中可确保在加载过程中可以解析其工厂。

From now on, we can replace the indicator component in any of our Angular projects, without the hustle of reimplementing most of the logic over and over again.

从现在开始，我们可以替换任何Angular项目中的指标组件，而不必一遍又一遍地重新实现大多数逻辑。

@NgModule({declarations: [AppComponent, LoadingMessageComponent],imports: [CommonModule,AppRoutingModule,LoadingIndicatorModule.forRoot(),],providers: [{provide: LOADING_INDICATOR_CONFIG,useValue: {indicatorComponent: LoadingMessageComponent}}],entryComponents: [LoadingMessageComponent]
})
export class AppModule {
}

If you would like to learn more about Dynamic components, I recommend you to read: Here is what you need to know about dynamic components in Angular by Max Koretskyi

如果您想了解有关动态组件的更多信息，我建议您阅读： 这是您需要了解 Max Koretskyi的 Angular中的动态组件的知识。

Thank you very much for reading this blog post. If you would like to try the above-mentioned lib out, you can find the package and instructions to install it here.

非常感谢您阅读此博客文章。 如果您想尝试上述lib，可以在此处找到软件包和安装说明。

You can also follow me on Twitter or GitHub.

您也可以在Twitter或GitHub上关注我。

翻译自: https://www.freecodecamp.org/news/how-i-built-a-customizable-loading-indicator-with-angular-dynamic-components-a291310f01d/

angular动态加载组件