将 ng2-bootstrap datepicker 与 angular 2-seed 项目一起使用时模板解析错误答案

【问题标题】：Template parse error when using ng2-boostrap datepicker with angular2-seed project将 ng2-bootstrap datepicker 与 angular 2-seed 项目一起使用时模板解析错误
【发布时间】：2016-06-30 05:36:54
【问题描述】：

我正在尝试在 angular2-seed 项目中使用 ng2-bootstrap 中的 datepicker，但出现以下错误。我正在使用最新版本的 angular2-seed 项目（angular 2.0.0-rc.3）提前感谢您对我做错的任何建议。

platform-browser.umd.js:2311 EXCEPTION: Error: Uncaught (in promise): Template parse errors:No provider for NgModel ("eight:290px;">
    <!--<datepicker [(ngModel)]="date" showWeeks="true"></datepicker>-->
    [ERROR ->]<datepicker [(ngModel)]="date" [showWeeks]="true"></datepicker>
</div>"): AboutComponent@20:8

我的 about.component.html

<wrapper>

<alert type="info">ng2-bootstrap hello world!</alert>

<div style="display:inline-block; min-height:290px;">
    <datepicker [(ngModel)]="date" [showWeeks]="true"></datepicker>
</div>

<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
{{ alert?.msg }}
</alert>

<alert dismissOnTimeout="5000">This alert will dismiss in 5s</alert>

<button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</button>

我的 about.component.ts

import {Component} from '@angular/core';
import {AlertComponent, DatePickerComponent} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
 selector: 'wrapper',
 moduleId: module.id,
 templateUrl: './about.component.html',
 styleUrls: ['./about.component.css'],
 directives: [
    AlertComponent,
    DatePickerComponent,
    CORE_DIRECTIVES
 ]
})
  export class AboutComponent {
    date:Date = new Date();
    alerts:Array<Object> = [
    {
      type: 'danger',
      msg: 'Oh snap! Change a few things up and try submitting again.'
    },
    {
      type: 'success',
      msg: 'Well done! You successfully read this important alert message.',
      closable: true
    }
];

  closeAlert(i:number) {
    this.alerts.splice(i, 1);
  }

  addAlert() {
    this.alerts.push({msg: 'Another alert!', type: 'warning', closable: true});
  }
}

我的引导代码

import { APP_BASE_HREF } from '@angular/common';
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component';

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

bootstrap(AppComponent, [
   disableDeprecatedForms(),
   provideForms(),
   APP_ROUTER_PROVIDERS,
{
   provide: APP_BASE_HREF,
   useValue: '<%= APP_BASE %>'
 }
]);

【问题讨论】：

您无需将CORE_DIRECTIVES 添加到提供程序。很长一段时间以来，它们在全球范围内提供。
我认为你在某种程度上混合了新旧形式。 github.com/valor-software/ng2-bootstrap/issues/638 可以请您发布您的bootstrap(...) 的样子吗？
已使用引导代码更新问题
@GünterZöchbauer 我正在尝试将我的项目从 angular2 beta 升级到 rc3。这就是 CORE_DIRECTIVES 存在的原因。我已将其从组件中删除。
你没有做错什么。如果您查看@GünterZöchbauer 提到的问题，您可以看到它附有pull request。当它被合并时，它应该会解决这个问题。

标签： angular datepicker ng2-bootstrap

【解决方案1】：

PR 已合并，所以现在您需要使用

来自 @angular/forms 的 NgModel 或 FORM_DIRECTIVES
和 bootstrap(...,[...disableDeprecatedForms(),provideForms(),...]

【讨论】：