Ngx-Bootstrap - 環境設定

在本章中，您將詳細瞭解在本地計算機上設定 ngx-bootstrap 工作環境。由於 ngx-bootstrap 主要用於 Angular 專案，請確保系統中已安裝了 Node.js、npm 和 Angular。

建立 Angular 專案

首先，建立一個 Angular 專案，使用以下命令來測試 ngx-bootstrap 元件。

ng new ngxbootstrap

這將建立一個名為 ngxbootstrap 的 Angular 專案。

將 ngx-bootstrap 新增為依賴項

您可以使用以下命令在新建專案中安裝 ngx-bootstrap−

npm install ngx-bootstrap

成功安裝 ngx-bootstrap 後，您可觀察到以下輸出 −

+ ngx-bootstrap@5.6.1
added 1 package from 1 contributor and audited 1454 packages in 16.743s

現在，要測試 bootstrap 是否適用於 Node.js，請使用以下命令建立測試元件 −

ng g component test
CREATE src/app/test/test.component.html (19 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (267 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)

清除 app.component.html 的內容，並用以下內容更新它。

app.component.html

<app-test></app-test>

更新 app.module.ts 的內容以包括 ngx-bootstrap 手風琴模組。我們將在後續章節中新增其他模組。用以下內容更新它。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion'
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 index.html 的內容以包括 bootstrap.css。用以下內容更新它。

index.html

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Ngxbootstrap</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

在下一章中，我們將更新測試元件以使用 ngx-bootstrap 元件。

列印頁面