在Angular 8中设置Bootstrap 4 Carousel的方法

由大津修一（Shuichi Ohtsu）所述

完整的源代码可在以下网址找到：https://github.com/Ohtsu/ng8-bootstrap4-carousel

视频解说（日语）

视频解说（英文）

---

在Angular 8中使用Bootstrap 4 Carousel的方法

之前，我們介紹了在Angular5中使用Bootstrap4 Carousel的方法，影片為https://youtu.be/Wgc1cPRdQd0。由於Angular的環境已經有了很大的改變，所以這次我們將介紹在Angular8中使用Bootstrap4 Carousel的方法。

请参考我们已经发布的关于在Angular8中设置Bootstrap4环境的方法的视频（https://youtu.be/gFxuSi4IZjM），此视频包含了从项目创建阶段开始的Bootstrap4的设置方法。

本次将使用从GitHub下载的预设项目来进行。

请查看该项目的完整源代码以了解其内容。

---

从GitHub下载项目源代码

首先，从GitHub下载项目的完整源代码。

这个网址

https://github.com/Ohtsu/ng8-bootstrap4-carousel 的页面

呐。

当页面显示出来后，请点击右侧的绿色“克隆或下载”按钮。

然后会显示一个下载地址，您点击右侧的复制图标，将该地址复制保存。

项目的创建

打开命令提示符，在合适的目录中导航到该目录，然后在该目录中，继续使用git clone，将复制的地址粘贴进去。

克隆指令：git clone https://github.com/Ohtsu/ng8-bootstrap4-carousel.git

请键入。

然后开始下载。

打开Visual Studio Code。

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

ng8-bootstrap4-carousel的“cd”命令

我要启动Visual Studio Code。

编码。

输入数据。

当您启动VSCode后，

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

然后，

安装npm

输入并安装项目所需的库。

为了备份源代码，您可以在本地安装Gulp。

为了随时备份完整的源代码，我们需要在本地安装Gulp。

使用npm安装gulp

请在终端中输入“npm i -g gulp”命令，以安装全局的gulp。

接下来，在这个阶段，我们将备份完整的源代码。

喝下去 -m 初始

输入。

-m选项表示要添加到备份目录名称中的文本。

在这里，我们明确了在初期阶段进行备份的重要性。

项目启动的检查

在这个阶段，我们将检查项目是否可以启动。

在终端窗口中，

嗯，我明白了。

在中文中输入这个。

旋转木马的显示

浏览器将自动打开，并显示轮播图。

当将鼠标指针置于屏幕上时，屏幕上的变换会停止。

当您点击屏幕上的图标时，图像会逐渐切换。

当您点击屏幕上的图标时，图像将以返回的形式进行转换。

更改Carousel的设置

接下来，我们尝试修改Carousel的显示设置。

回到 VSCode，打开 app.component.ts 文件。

现在的设定是，图像的转换每2秒一次，但是我们尝试将这个设定改为每1秒一次。

使用浏览器进行确认

用浏览器。

http://本地主机：4200

当再次表示时，可以确认图像每秒切换一次。

好的。

旋转木马的设置更改

接下来，我们尝试将Carousel的显示设置每10秒更改一次。

回到VSCode，并打开app.component.ts文件。

现在的设置是，图像的转换是每秒一次，但让我们把这个设置改为每10秒一次试试看。

用浏览器进行确认

在网页浏览器上，

http://本地主机:4200

当再次显示时，可以确认图像每10秒切换一次。

好的。

参考资料

• “Angular8におけるBootstrap4環境の設定方法(Youtube)”,

 

• https://youtu.be/gFxuSi4IZjM

 

• “How to set up Bootstrap 4 environment in Angular 8”,

 

• https://youtu.be/NoSkIVvf5o8

 

• “Angular8におけるBootstrap4環境の設定方法(Qiita)”,

 

• https://qiita.com/SOhtsu/items/62253bb2309c9a4809fd

 

• “Angular 7 Bootstrap 4 UIs: ng-bootstrap and ngx-bootstrap [Part 1]”,

 

• https://www.techiediaries.com/angular-bootstrap-ui/

 

• “Angular5, Angular6, Angular7 Custom Library: Step-by-step guide”,

 

• https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/

 

• “Angular5, Angular6, Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド”,

 

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