[英]Get ng-bootstrap to work for angular cli project with npm
我正在嘗試使用ng-bootstrap工作的 angular CLI 設置項目。 但是,我根本無法讓這種風格發揮作用。 這是我采取的確切步驟(這是從入門頁面開始的步驟)
按照入門指南對我的 app.module.ts 文件執行以下操作
從“@ng-bootstrap/ng-bootstrap”導入 {NgbModule};
@NgModule({ 聲明: [AppComponent, ...], 導入: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) 導出類 AppModule { }
此時我的設置應該准備好了。 所以我獲取日期選擇器HTML 和 TS 代碼,並將其放入我的 app.component.ts 和 app.compoennt.html 文件中
app.component.ts
import { Component } from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
const now = new Date();
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
model: NgbDateStruct;
date: { year: number, month: number };
selectToday() {
this.model = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };
}
}
應用程序組件.html
<p>Simple datepicker</p>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>
您需要在 bootstrap.min.css 的樣式中添加 angular-cli.json
"styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]
你需要在 app.module.ts 導入 Ng2BootstrapModule
@NgModule({ declarations: [AppComponent], imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes), Ng2BootstrapModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.