如何在 Angular 中添加引导程序

在 Angular 中添加引导程序可以使应用程序更加易于使用和导航。在本文中，我们将介绍如何在 Angular 中添加引导程序。

步骤一：安装 ngx-bootstrap

ngx-bootstrap 是一组 Angular 组件和指令，它们是由 bootstrap 框架创建的。因此，在添加 ngx-bootstrap 之前需要先安装 bootstrap 4。

npm install bootstrap@4.0.0 --save

请注意，我们使用了版本 4.0.0。这是因为 ngx-bootstrap 只支持 bootstrap 4。

接下来，安装 ngx-bootstrap：

npm install ngx-bootstrap --save

步骤二：在 AppModule 中导入 ngx-bootstrap 模块

在 app.module.ts 文件中导入 ngx-bootstrap 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { AlertModule } from 'ngx-bootstrap';

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

请注意，我们导入了 AlertModule，它是 ngx-bootstrap 中的一个模块，并调用了 AlertModule.forRoot() 方法。

步骤三：在组件中使用 ngx-bootstrap 组件

现在我们已经成功地将 ngx-bootstrap 添加到我们的应用程序中，让我们在一个组件中使用它。请注意，我们将在 AppComponent 中使用 Alert 组件。

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

@Component({
  selector: 'app-root',
  template: `
    <alert type="info">
      This is an info alert.
    </alert>
  `
})
export class AppComponent { }

请注意，我们在模板中使用了 Alert 组件，并指定了 type 属性为 "info"。这将使 Alert 组件显示为信息警报。

结论

在本文中，我们学习了如何在 Angular 中添加 ngx-bootstrap 引导程序。我们了解了如何安装 ngx-bootstrap，如何在 AppModule 中导入它，并在组件中使用它。现在您可以使用 ngx-bootstrap 创建响应式，易于导航的应用程序！