javascript - Πώς να κάνετε το ng-bootstrap να λειτουργεί σε έργο Angular CLI με npm

Προσπαθώ να στήσω ένα έργο χρησιμοποιώντας το Angular CLI με το ng-bootstrap να λειτουργεί. Ωστόσο, δεν μπορώ να κάνω το στυλ να λειτουργήσει καθόλου. Εδώ είναι τα ακριβή βήματα που ακολούθησα (που είναι το βήμα από τη σελίδα get-started)

1. Δημιουργήστε ένα νέο έργο χρησιμοποιώντας - ng new testApp
2. Σύμφωνα με τις σελίδες έναρξης του ng-bootstrap, χρειάζομαι το bootstrap 4 προεγκατεστημένο. Έτσι, τρέχω npm install [email
3. Στη συνέχεια τρέχω npm install --save @ng-bootstrap/ng-bootstrap

4. Ακολούθησα τον οδηγό για να ξεκινήσω και έκανα τα εξής στο αρχείο app.module.ts μου

   import {NgbModule} από '@ng-bootstrap/ng-bootstrap';

   @NgModule({ δηλώσεις: [AppComponent, ...], εισαγωγές: [NgbModule.forRoot(), ...], εκκίνηση: [AppComponent] }) εξαγωγή κλάσης AppModule { }

5. Σε αυτό το σημείο η ρύθμιση μου θα πρέπει να είναι έτοιμη. Οπότε παίρνω τον κώδικα HTML και TS του Date Picker και τον βάζω στα αρχεία app.component.ts και app.component.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() };
  }
}

app.component.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>

6. εκτέλεσε ng serve και αυτό είναι το αποτέλεσμα

   

   

Απάντηση #1

• Πρέπει να προσθέσετε στο angular-cli.json στις styles το bootstrap.min.css

  "styles": [
      "styles.scss",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ]
  

• Πρέπει να εισάγετε το Ng2BootstrapModule στο app.module.ts

  @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes), Ng2BootstrapModule],
   providers: [],
   bootstrap: [AppComponent]
  })
  
  export class AppModule { }