带有 Angular 2 版本的 Angular UI Bootstrap 库的动态 templateURL答案

【问题标题】：Dynamic templateURL with Angular 2 version of the Angular UI Bootstrap library带有 Angular 2 版本的 Angular UI Bootstrap 库的动态 templateURL
【发布时间】：2016-10-17 01:52:18
【问题描述】：

我正在使用以下代码 How to use variable to define templateUrl in Angular2 创建动态模板 URL，但我需要在模板中使用日期选择器，并且在添加 Angular UI Bootstrap 库（Angular 2 版本）时遇到问题。错误是

“没有 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 中的字段日期未注释，则应用程序不起作用。

【问题讨论】：

标签： angular ng-bootstrap

【解决方案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

注意：您可以使用NgbDatepickerModule 代替NgbModule。它将提高性能Plunker

【讨论】：

【解决方案2】：

您可以通过这种方式导入 NgbDatepickerModule：

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

这应该会修复“NgbDateParserFormatter 没有提供程序”

【讨论】：