angular - Visual Studio コードで angular2 に ng2-bootstrap を使用する方法

Question

VS CODE IDE を使用して Angular2 アプリケーションで ng2 ブートストラップを使用できるようにする一連の手順はありますか。同じことを共有してください。ありがたくいただきます。次のコマンドを使用して ng2-bootstrap モジュールをインストールしました。

npm install ng2-bootstrap --save

このステップの後に何をしますか？ng2-bootstrap を使用するには moment.js が必要ですか?

Answer 1

を実行した後npm install --save ng2-bootstrap、次の手順に従う必要があります-

Systemjs.config.js で、ng2-bootstrap を次のように構成します。

  // map tells the System loader where to look for things
  var map = {
    'moment': 'node_modules/moment/moment.js',
    'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

index.html にこれらを追加します

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

コンポーネントでは、次のように使用できます-

import {AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';

実装例:

import {Component} from '@angular/core';
import {AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';
import {NgModel} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <alert type="info">ng2-bootstrap hello world!</alert>
      <pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
      <h4>Inline</h4>
      <div style="display:inline-block; min-height:290px;">
        <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
      </div>
  `,
})
export class AppComponent {
  public dt:Date = new Date();
  private minDate:Date = null;
  private events:Array<any>;
  private tomorrow:Date;
  private afterTomorrow:Date;
  private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
  private format = this.formats[0];
  private dateOptions:any = {
    formatYear: 'YY',
    startingDay: 1
  };
  private opened:boolean = false;

  public getDate():number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }
}

そして、 app.module.ts で Ng2BootstrapModule を次のようにインポートします-

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

....
  imports: [
    BrowserModule,
    FormsModule,
    Ng2BootstrapModule
  ],
....

また、このプランカーを参照できます