A brief discussion on the implementation method of dynamic loading of components in angular9

Load components according to conditions to achieve flexible switching of components and reduce the use of a large number of ngIf. It is also a relatively common operation in angular. In this article, we will share with you the dynamic use of angular components. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Creation of directives

Before adding a component, you must first define an anchor point to tell Angular where to insert the component. place.
Under src/dynamic-banner/ad.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ad-host]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

AdDirective injects ViewContainerRef to obtain access to the container view. This container is the host of the dynamically added components.
In the @Directive decorator, pay attention to the name of the selector: ad-host, which is the directive you will apply to the element.

Related recommendations: "angular tutorial"

Core code of dynamic components

HTML loaded by dynamic components

src/dynamic-banner/ad-banner.component.html

<div>
  <h3 id="Advertisements">Advertisements</h3>
  <ng-template></ng-template>
</div>

ts of dynamic components

src/dynamic-banner /ad-banner.component.ts

import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy, SimpleChanges } from '@angular/core';

import { AdDirective } from './ad.directive';
import { AdItem }      from './ad-item';
import { AdComponent } from './ad.component';
import { componentMap } from './component/utils';
@Component({
  selector: 'app-ad-banner',
  templateUrl: './ad-banner.component.html',
  // styleUrls: ['./ad-banner.component.css']
})
export class AdBannerComponent implements OnInit {
  @Input() type: string = 'ad1' // 传入的key,确定加载那个组件
  @Input() data: any = {} // 传入组件的数据
  @ViewChild(AdDirective, {static: true}) adHost: AdDirective; // 动态组件的指令
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['type']) this.loadComponent()
  }

  loadComponent() {
    // adItem 要加载的组件类，以及绑定到该组件上的任意数据
    const adItem = new AdItem(componentMap[this.type], this.data) 
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
    const viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<adcomponent>componentRef.instance).data = adItem.data;
  }
}</adcomponent>

ad-item.ts

src/dynamic-banner/ad-item.ts

import { Type } from '@angular/core';

export class AdItem {
  constructor(public component: Type<any>, public data: any) {}
}</any>

ad.component.ts

src/dynamic-banner/ad.component.ts

import { Type } from '@angular/core';
export interface AdComponent {
  data: any;
}

Unified component registration

src/dynamic-banner/share.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componets } from './component/utils';
import { AdDirective } from './ad.directive';
import { AdBannerComponent } from './ad-banner.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[
    [...componets],
    AdDirective,
    AdBannerComponent,
  ],
  declarations: [
    [...componets],
    AdDirective,
    AdBannerComponent,
  ],
  entryComponents: [
    [...componets]
  ]
})
export class ShareModule { }

Component mapping

src/dynamic-banner/component/utils.ts

import { HeroProfileComponent } from "./hero-profile.component";
import { HeroJobAdComponent } from './hero-job-ad.component';
const componentMap = {
    ad1: HeroProfileComponent,
    ad2: HeroJobAdComponent
}
const componets = [
    HeroProfileComponent,
    HeroJobAdComponent
]
export {componets, componentMap}

Rendering

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on the implementation method of dynamic loading of components in angular9. For more information, please follow other related articles on the PHP Chinese website!