A brief discussion on the implementation method of dynamic loading of components in angular9-JS Tutorial-php.cn

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

青灯夜游

Release： 2021-03-19 09:45:15

forward

2764 people have browsed it

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.

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

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) { }
}

Copy after login

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>Advertisements</h3>
  <ng-template></ng-template>
</div>

Copy after login

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>

Copy after login

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>

Copy after login

ad.component.ts

src/dynamic-banner/ad.component.ts

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

Copy after login

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 { }

Copy after login

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}

Copy after login

Rendering

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

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!