无法使用 ng-Bootstrap 日期选择器答案

【问题标题】：Cannot use ng-Bootstrap datepicker无法使用 ng-Bootstrap 日期选择器
【发布时间】：2017-07-15 18:57:43
【问题描述】：

我从英雄之旅https://angular.io/guide/setup 克隆了快速入门项目，并尝试添加 ng-Bootstrap 日期选择器，但它不起作用。我的项目：

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent }  from './app.component';
import { MyDatePicker } from './datepicker/my-datepicker.component';

@NgModule({
  imports:      [ BrowserModule, NgbModule.forRoot() ],
  declarations: [ AppComponent, MyDatePicker ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello {{name}}</h1>
  <my-datepicker></my-datepicker>
  `,
})
export class AppComponent  { name = 'Angular'; }

my-datepicker.component.ts:

import { Component } from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
    selector: 'my-datepicker',
    templateUrl: './my-datepicker.component.html',
    styleUrls: [ './my-datepicker.component.css' ]
})
export class MyDatePicker {

    title: string = 'My datepicker';

    model: NgbDateStruct;
    date: {year: number, month: number};

    selectToday() {
        this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
    }

}

我的日期选择器.component.html

{{ title }}

<p>Simple datepicker</p>

<ngb-datepicker></ngb-datepicker>

systemjs.config.js：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

但它不起作用。我得到的结果是：

很奇怪，为什么会这样？

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

更新 index.html 后 datepicker 看起来不错，但现在我无法绑定 ngModel 并且出现错误：

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
zone.js:655 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ngb-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>Simple datepicker</p>

<ngb-datepicker #dp [ERROR ->][(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<hr/>
"): ng:///app/datepicker/my-datepicker.component.html@8:20 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'.
1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ngb-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>Simple datepicker</p>

<ngb-datepicker #dp [ERROR ->][(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

【问题讨论】：

你在加载 bootstrap 4 css 吗？ :)
怎么做，我应该把这些css放在哪里？
更新index.html文件
该项目更简单的方法是像任何其他 html 网站一样在 html 上添加标签。
好的，我添加到 index.html 但现在我收到一个错误：未捕获的错误：Bootstrap 的 JavaScript 需要 jQuery。必须在 Bootstrap 的 JavaScript 之前包含 jQuery。在 bootstrap.min.js:6

标签： javascript angular datepicker bootstrap-4

【解决方案1】：

参考 index.html 文件中的 jquery 脚本

src="https://code.jquery.com/jquery-2.x-git.min.js"

在引导脚本之前，因为它依赖于 jquery

【讨论】：

【解决方案2】：

我遇到了同样的问题，并根据ng-bootstrap Getting Started Guide

的 Dependencies 部分安装 Bootstrap 4 alpha 解决了它

这是您需要在 package.json 所在的同一文件夹上运行的命令（但请记住阅读我在上面发布的链接）：

npm install bootstrap@4.0.0-alpha.6 --save

【讨论】：