[英]Angular 5 - Import Module into Dynamic Module
我对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
指令不在页面上,模板仍不会呈现。
有什么我想念的吗? 是否有将自定义模块导入动态模块的特殊方法?
任何帮助将不胜感激!
我相信Webpack的动态导入功能可以支持此功能:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.