Angular 5 - Импортировать модуль в динамический модуль - PullRequest
Новая
       12

Angular 5 - Импортировать модуль в динамический модуль

0 голосов
/ 18 мая 2018

Я относительно новичок в Angular 5. Я пытался создать динамические компоненты с шаблоном, полученным из службы.Я смог отобразить базовые шаблоны с помощью этой функции: 

createComponent(): void {
  this.container.clear();
  // create dynamic component using template and item
  const component = Component({template: this.template})(class {});
  const module = NgModule({
    imports: [
      CommonModule
    ],
    declarations: [component],
    entryComponents: [component]
  })(class {});
  // compile module
  this.compiler.compileModuleAndAllComponentsAsync(module)
    .then((factories) => {
      const factory = factories.componentFactories[0];        
      this.componentRef = this.container.createComponent(factory);
      this.componentRef.instance.item = this.item;
      this.componentRef.instance.app = this.app;
    });
}

Теперь, когда у меня есть простой рендеринг шаблонов, я пытаюсь получить рендеринг Owl Carousel в своем шаблоне.Когда я пытаюсь импортировать модуль Angular OwlModule в динамический NgModule, ничего не отображается, и я не получаю никаких ошибок в консоли.

Вот код, который я использую в своем шаблоне длярендерит карусель: 

<owl-carousel *ngIf="trendingItems.length > 0" [items]="trendingItems[0]['Carousel Media']" [carouselClasses]="['owl-theme', 'row', 'sliding']">
  <div *ngFor="let media of trendingItems[0]['Carousel Media']">
    <div *ngIf="media.MediaTypeId == 1000 || media.MediaTypeId == 1001">
      <div layout="column" layout-fill="">
        <div *ngIf="media.MediaTypeId == 1000" class="img-container">
          <img data-src="{{app.mediaPath(media)}}" class="img-responsive" id="image-height">
        </div>
        <div *ngIf="media.MediaTypeId == 1001" class="videoBox">
          <video media="media"></video>
        </div>
      </div>
    </div>
  </div>
</owl-carousel>

Это прекрасно воспроизводится, когда я жестко кодирую его в нединамический шаблон, поэтому я не думаю, что это проблема.Кроме того, шаблон по-прежнему не отображается, даже если директива owl-carousel отсутствует на странице.

Есть ли что-то, что мне не хватает?Есть ли особый способ импорта пользовательских модулей в динамические модули?

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 25 мая 2018

Я полагаю, что это может поддерживаться функцией динамического импорта Webpack:

https://webpack.js.org/guides/code-splitting/

...