目录
步骤1 –安装Angular CLI v9
步骤2 –初始化Angular 9项目
步骤3 –安装Bootstrap 4
第4步–创建Angular组件并设置路由
第5步-添加Bootstrap 4Jumbotron
第6步-创建Angular Bootstrap 4表
步骤7 –添加Bootstrap 4表单组件
步骤8 –为Angular 9应用程序提供服务
结论
在本教程中，我们将学习如何将Bootstrap 4与Angular 9集成和使用。
我们将看到如何初始化Angular 9项目并将其与Bootstrap 4集成。接下来，我们将使用各种Bootstrap 4 CSS实用程序来创建具有表、表单、按钮、卡片和jumbotrons的响应式布局。
Bootstrap是一个免费的开源CSS框架，用于创建响应式布局，它是移动优先的，并且包含用于排版、表单、按钮和导航等的现成CSS实用程序。
有多种方式将Bootstrap 4与Angular 9应用程序集成。让我们来看一个可能的解决方案示例。
步骤1 –安装Angular CLI v9让我们从安装最新版本的Angular CLI开始。在您的终端中，运行以下命令：
$ npm install -g @angular/cli安装Angular CLI后，让我们通过运行以下命令来初始化Angular 9项目：
$ ng new angular-9-bootstrap-example然后，CLI将询问您：
Would you like to add Angular routing?按Y。
接下来，它将询问您：
Which stylesheet format would you like to use?选择“CSS”。
接下来，我们需要设置Angular表单。
转到src/app/app.module.ts文件，从@angular/forms导入FormsModule，并将其包含在imports数组中，如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
/* ... */
@NgModule({
declarations: [
/* ... */
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }初始化Angular 9项目后，让我们继续安装Bootstrap 4并将其与Angular集成。
转到项目的文件夹：
$ cd angular-9-bootstrap-example接下来，使用以下命令从npm安装Bootstrap 4和jQuery：
$ npm install --save bootstrap jquery接下来，转到angular.json文件，并将Bootstrap CSS和JS文件以及jQuery的路径添加到build目标下的styles和 scripts数组，如下所示：
"architect": {
"build": {
[...],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},在将Bootstrap 4与Angular 9项目安装并集成后，让我们创建一些组件来测试各种Bootstrap样式。
转到命令行界面并运行以下命令：
$ ng generate component jumbotron
$ ng generate component bootstrap-form
$ ng generate component bootstrap-table接下来，我们需要在路由模块中包括这些组件以启用多个视图。
转到src/app/app-routing.module.ts 文件并按如下所示进行更新：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BootstrapTableComponent } from './bootstrap-table/bootstrap-table.component';
import { BootstrapFormComponent } from './bootstrap-form/bootstrap-form.component';
import { JumbotronComponent } from './jumbotron/jumbotron.component';
const routes: Routes = [
{path: "", pathMatch: "full",redirectTo: "home"},
{path: "jumbotron", component: JumbotronComponent},
{path: "bootstrap-form", component: BootstrapFormComponent},
{path: "bootstrap-table", component: BootstrapTableComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Bootstrap Jumbotron是一种轻巧、灵活的组件，可以选择扩展整个视口，以在您的站点上展示关键的营销信息。
让我们将Bootstrap Jumbotron组件添加到我们的jumbotron页面。
转到src/app/jumbotron/jumbotron.component.html 文件，并添加以下HTML标记：
Angular 9 Bootstrap 4 Demo
This tutorial teaches you how to integrate Bootstrap 4 with Angular 9
Wu使用内置的.jumbotron类来创建Bootstrap Jumbotron。
现在，让我们看看如何使用Bootstrap 4表来显示表格数据。
转到src/app/bootstrap-table/bootstrap-table.component.ts文件，并添加一些我们可以显示的数据：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bootstrap-table',
templateUrl: './bootstrap-table.component.html',
styleUrls: ['./bootstrap-table.component.css']
})
export class BootstrapTableComponent implements OnInit {
employees = [
{id: 1, name: "E 001", description: "E 001 des", email: "e001@email.com"},
{id: 2, name: "E 002", description: "E 002 des", email: "e002@email.com"},
{id: 3, name: "E 003", description: "E 003 des", email: "e003@email.com"},
{id: 4, name: "E 004", description: "E 004 des", email: "e004@email.com"}
];
selectedEmployee;
constructor() { }
ngOnInit() {
}
public createEmployee(e: {id, name, description, email}){
this.employees.push(e);
}
public selectEmployee(e){
this.selectedEmployee = e;
}
}我们仅定义了两个变量，employees和selectedEmployee用于保存一组雇员和选定的雇员。还有一种将所选雇员分配给selectedEmployee变量的selectEmployee()方法。
接下来，转到src/app/bootstrap-table/bootstrap-table.component.html 文件并按如下所示进行更新：
#
Name
Email
Actions
Select
#
Bootstrap 4 Card是一种灵活且可扩展的内容容器。它包括页眉和页脚选项，各种内容，上下文背景颜色以及强大的显示选项。如果您熟悉Bootstrap 3，则可以用卡片代替我们的旧面板，wells和缩略图。与这些组件类似的功能可用作card的修饰符类。
我们使用内置.table和.table-hover类创建Bootstrap表，.card，.card-block，.card-title和.card-text类来创建card。
步骤7 –添加Bootstrap 4表单组件让我们继续向bootstrap-form组件添加Bootstrap样式的表单。
接下来，转到src/app/bootstrap-form/bootstrap-form.component.ts文件并按如下所示进行更新：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'bootstrap-form/-create',
templateUrl: './bootstrap-form/.component.html',
styleUrls: ['./bootstrap-form/.component.css']
})
export class BootstrapForm/Component implements OnInit {
employee : {id, name, description, email} = {id: null, name: "", description: "", email: ""};
constructor() { }
ngOnInit() {
}
createEmployee(){
console.log("Employee created: ", this.employee);
this.employee = {id: null, name: "", description: "", email: ""};
}
}接下来，转到src/app/bootstrap-form/bootstrap-form.component.html文件并按如下所示进行更新：
ID
Enter your employee’s ID
Employee Name
Enter your employee’s name
Employee Email
Enter your employee’s email
Employee Description
Enter your employee’s description
Create employee
我们使用.form-group和.form-control类来创建Bootstrap表单。
转到命令行界面，然后从项目的文件夹中运行以下命令：
$ ng serve开发服务器将在http://localhost:4200地址启动。
作为回顾，我们已经看到了如何初始化Angular 9项目并将其与Bootstrap 4集成。接下来，我们使用了各种Bootstrap CSS实用程序来创建具有表、表单、按钮、卡片和jumbotron的响应式布局。
