在Angular8中设置Bootstrap4环境的方法是什么？

2 年 ago

雅, 悟

2 minutes

undefined

完整源代码
https://github.com/Ohtsu/ng8-bootstrap4-initial

视频解说（日语）

视频说明（英语）

在Angular8中设置Bootstrap4环境的方法是什么？

之前，我介绍了在Angular5中设置Bootstrap4环境的方法（https://youtu.be/ndk2Hqd8P7I），但是随着时间的推移，Angular的环境已经有了很大的变化。因此，今天我将介绍在Angular8中设置Bootstrap4环境的方法。

生成 Angular 8 项目

首先，生成一个Angular8的项目。

在命令提示符窗口中

ng新建ng8-bootstrap4-initial

输入。

ng8-bootstrap4-initial是项目名称，该名称可自行确定。

在接下来的问题中，有一个关于是否要将路由功能集成进去的询问，因此我们选择“是”。

因为有关样式表格式的选择询问，所以我们选择SCSS。

然后项目的生成将开始。

这个过程需要一些时间。

启动Visual Studio Code

然后，进入生成的项目目录中。

转到ng8-bootstrap4-initial文件夹

我将打开Visual Studio Code。

编码。 .)

输入它。

当VSCode应用程序启动后，

按下Ctrl+@键，打开终端窗口。

undefined

安装Bootstrap4

接下来，在终端窗口中，

安装 Bootstrap 时，请使用命令 npm i –save bootstrap。

输入以下内容，并安装Bootstrap4。

安装ng-bootstrap

接下来，我们需要安装ng-bootstrap。

安装 @ng-bootstrap/ng-bootstrap 并将其保存到依赖列表中，可以使用以下命令: npm i –save @ng-bootstrap/ng-bootstrap

输入”と”。

修改 app.module.ts

下一步，我们将编辑app.module.ts文件，并安装ng-bootstrap模块。

打开src/app目录下的app.module.ts文件，并导入要使用的NgbModule。

undefined

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改 angular.json 文件

接下来，打开项目的根目录下的angular.json文件，并添加已安装的Bootstrap4的css文件。

詳細は、angular.jsonファイル内のprojects — architect — build — stylesにあります。

“./node_modules/bootstrap/dist/css/bootstrap.min.css” 可以用下面的中文表达：

“./node_modules/bootstrap/dist/css/bootstrap.min.css”

添加。

undefined

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng8-bootstrap4-initial": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng8-bootstrap4-initial",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": []
          },

项目启动的验收检查

在这个阶段，首先要检查项目是否能够启动。

在终端窗口中，

唔怕 -o

输入如下。

浏览器将自动打开，显示Angular的默认页面。

undefined

好的。

ng-bootstrap网站的展示

接下来我们将通过使用ng-bootstrap网站的演示程序来确认Bootstrap4实现了哪些功能。

我要打开ng-bootstrap网站。

请使用下述中文地址：

请使用以下中文表达：

这是一个网页链接：https://ng-bootstrap.github.io/#/home

是的。

undefined

在这里，我们决定选择通常常用的下拉菜单。

从左边的菜单中选择下拉菜单。

通过打开”Examples”选项卡，您可以尝试下拉和弹出的功能。

undefined

我决定在Angular 8的项目中实现这个功能。

首先，单击“Code”按钮，以显示该源代码。

然后，复制这个源文件。

undefined

对app.component.html进行修改

回到VSCode，打开位于src/app目录下的app.component.html文件，在复制的下拉菜单示例源代码中粘贴。

undefined

请在浏览器中确认

只要本地服务器仍在运行，当您更改了app.component.html文件后，通过在浏览器中打开http://localhost:4200可以确认更改的反映。

由于画面太小，下拉菜单变成了上拉菜单。

undefined

那么，我们稍微修改一下app.component.html文件。

注释掉默认的显示部分，并扩大显示区域。

undefined

我已经确认了下拉菜单的设置，但由于下拉框的显示区域较小，我要进一步修改app.component.html文件。

undefined

我将插入换行符，并扩大标题与之间的间隔。

undefined

我在Angular8项目中成功地确认了Bootstrap4的下拉菜单和上拉菜单功能。

undefined

没问题。 .)

参考。

https://www.udemy.com/angular5-l/

✖

将在 10 秒后关闭

bannerAds