Динамически загружаемый вложенный компонент Angular 9 - PullRequest
Новая
       5

Динамически загружаемый вложенный компонент Angular 9

0 голосов
/ 29 мая 2020

Я имел в виду это. https://angular.io/guide/dynamic-component-loader

Я хочу, чтобы контент был отправлен сервером, который содержит код html с ng-template <ng-template ad-host></ng-template>.

Мой контент с сервера может выглядеть как 

                  <div class="ad-banner-example">
                    <h3>Advertisements</h3>
                    <ng-template ad-host></ng-template> <!-- one entry of ad-host -->
                    <div class="content">
                        <!-- all other content --> 
                        <ng-template ad-host></ng-template>  <!-- another ad-host -->
                  </div>

Я изменил ad-banner.component.ts следующим образом. 

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

    import { AdDirective } from './ad.directive';
    import { AdItem }      from './ad-item';
    import { AdComponent } from './ad.component';

    @Component({
      selector: 'app-ad-banner',
      template: `<div [innerHTML]="inerhtml"></div>` // REPLACED THIS WITH inerhtml, 
    })
    export class AdBannerComponent implements OnInit, OnDestroy  {
      @Input() ads: AdItem[];
      currentAdIndex = -1;
      @ViewChild(AdDirective, {static: true}) adHost: AdDirective;

      @ViewChild(AdBannerComponent, {read: ViewContainerRef}) other;

      ViewContainerRef
      interval: any;
      inerhtml = `<div class="ad-banner-example">
        <h3>Advertisements</h3>
        <ng-template ad-host></ng-template>
    </div>`;

      constructor(private viewContainerRef:ViewContainerRef,private componentFactoryResolver: ComponentFactoryResolver) { }

      ngOnInit() {
        // Imagine server sending this response. I will Do this part, once this work
        this.inerhtml=`  <div class="ad-banner-example">
                    <h3>Advertisements</h3>
                    <ng-template ad-host></ng-template>
                  </div>`;
        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);
      }
    }

Но этот код не отображает представление, я могу видеть только рекламные объявления заголовка на экран. Я новенький, помогите пожалуйста.

Вот stackblitz

...