Angular 2 版本的 Angular UI Bootstrap 库的动态 templateURL

Question

我正在使用以下代码创建一个动态模板 URL，但我需要在模板中使用日期选择器并且我在添加 Angular UI Bootstrap 库（Angular 2 版本）。错误是

"No provider for NgbDateParserFormatter"

我在导入部分添加了 NgbModule 和 FormsModule

@NgModule({
    imports: [CommonModule, NgbModule.forRoot(), FormsModule ],
    declarations: [DynamicHtmlComponent]
})

class DynamicHtmlModule {}

我创建了一个 plunker 版本 https://plnkr.co/edit/kWoSTi?p=preview 如果文件 src/articles/first.html 中的字段日期未被注释，应用程序将无法运行。

Answer 1

我会利用以下方式来实现它：

this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
  .then(factory => {
     const moduleRef = factory.ngModuleFactory.create(this.vcRef.parentInjector);

     const compFactory = factory.componentFactories
        .find(x => x.componentType === DynamicHtmlComponent);

     const cmpRef = this.vcRef.createComponent(compFactory, 0, moduleRef.injector);
});

Plunker Example

One note: you can use NgbDatepickerModule instead of NgbModule. It will improve performance Plunker

Answer 2

您可以这样导入 NgbDatepickerModule：

@NgModule({
imports: [
    ...
    NgbDatepickerModule.forRoot()
],

这应该可以修复 "No provider for NgbDateParserFormatter"

Angular 2 版本的 Angular UI Bootstrap 库的动态 templateURL

Dynamic templateURL with Angular 2 version of the Angular UI Bootstrap library

ng-bootstrap

angular