Ionic 如何在Angular 8中动态加载组件?

r7knjye2  于 2022-12-08  发布在  Ionic
关注(0)|答案(4)|浏览(211)

目前我是用IF做的,但是例如在Vue.JS中有动态组件。在Angular中有类似的东西吗?

<app-tabs-choice *ngIf="action.type == 'choice'"></app-tabs-choice>
<app-tabs-comment *ngIf="action.type == 'comment'"></app-tabs-comment>
<app-tabs-message *ngIf="action.type == 'message'"></app-tabs-message>
disho6za

disho6za1#

有多种方法可以实现:
1.使用ngSwitchCase
1.您也可以通过路由实现此目的
1.如果只有一个标签组件,那么可以使用NgTemplateOutlet创建可重用组件。

sr4lhrrt

sr4lhrrt2#

Angular中有Lazy Loading,但是它是基于路由的,换句话说,你不能基于ngIf指令来延迟加载组件,但是如果它们的路由不同,你可以延迟加载它们

z9gpfhce

z9gpfhce3#

您可以使用ngComponentOutlet,但这完全取决于您的用例:

<ng-container *ngIf="tabs[action.type] as comp" [ngComponentOutlet]="comp"></ng-container>

在您的元件中:

export class SomeComponent {
  readonly tabs = {
    choice: TabsChoiceComponent,
    comment: TabsCommentComponent,
    message: TabsMessageComponent
  }
}
uplii1fm

uplii1fm4#

您可以使用以下名称动态加载组件:

export class AdBannerComponent implements OnInit, OnDestroy {
  @Input() ads: AdItem[];
  currentAdIndex = -1;
  @ViewChild(AdDirective, {static: true}) adHost: AdDirective;
  interval: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
    this.getAds();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    const adItem = this.ads[this.currentAdIndex];

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

  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}

HTML:

<div class="ad-banner-example">
  <h3>Advertisements</h3>
  <ng-template ad-host></ng-template>
</div>

有关详细信息,请查看this link

相关问题