Angle9에서 구성 요소의 동적 로딩 구현 방법에 대한 간략한 설명

조건에 따라 구성요소를 로드하여 구성요소를 유연하게 전환하고 많은 수의 ngIf 사용을 줄입니다. 이는 angular에서도 비교적 일반적인 작업입니다. 이 글에서는 앵귤러 컴포넌트의 동적 사용을 여러분과 공유하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

지시문 생성

구성 요소를 추가하기 전에 먼저 앵커 포인트를 정의하여 구성 요소를 삽입할 위치를 Angular에 알려야 합니다.
src/dynamic-banner/ad.directive.ts에서

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

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

AdDirective는 ViewContainerRef를 삽입하여 컨테이너 보기에 대한 액세스 권한을 얻습니다. 이 컨테이너는 동적으로 추가된 구성 요소의 호스트입니다.
@Directive 데코레이터에서 선택기 이름인 ad-host에 주의하세요. 이는 요소에 적용할 지시문입니다.

관련 권장 사항: "angular Tutorial"

동적 구성 요소의 핵심 코드

HTML은 동적 구성 요소에 의해 로드됨

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

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

Dynamic 구성요소 ts

src/dynamic-banner/ad-banner.comComponent.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.comComponent.ts

src/dynamic-banner/ad.comComponent.ts

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

구성 요소 통합 등록

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

구성 요소 매핑

src/dynamic- 배너 /comComponent/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}

Renderings

프로그래밍 관련 지식을 더 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angle9에서 구성 요소의 동적 로딩 구현 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!