Ngx-Bootstrap - 快速指南

Ngx-Bootstrap - 概述

ngx-bootstrap 是一个非常流行的库，可在基于 Angular 的项目中使用引导组件。它几乎包含了Bootstrap的所有核心组件。ngx-bootstrap 组件在设计上是模块化的、可扩展的和适应性强的。以下是该引导库的主要亮点。

灵活性

  • 所有组件均采用模块化设计。自定义模板、样式可以轻松应用。

  • 所有组件都是可扩展和适应性强的，并且可以在桌面和移动设备上以相同的易用性和性能运行。

支持

  • 所有组件都使用最新的样式指南和代码可维护性和可读性指南。

  • 所有组件都经过全面的单元测试并支持最新的 Angular 版本。

广泛的文档

  • 所有组件都有丰富的文档记录并且编写得很好。

  • 所有组件都有多个工作演示，以展示多种类型的功能。

开源

  • ngx-bootstrap 是开源项目。它由麻省理工学院许可证支持。

Ngx-Bootstrap - 环境设置

在本章中，您将详细了解如何在本地计算机上设置 ngx-bootstrap 的工作环境。由于 ngx-bootstrap 主要用于 Angular 项目，因此请确保您的系统上安装了Node.js、npm和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的内容并更新以下内容。

应用程序组件.html

<app-test></app-test>

更新 app.module.ts 的内容以包含 ngx-bootstrap Accordion 模块。我们将在后续章节中添加其他模块。更新以下内容。

应用程序模块.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。更新以下内容。

索引.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 组件。

Ngx-Bootstrap - 手风琴

Accordion 是一个显示可折叠面板的控件，用于在有限的空间内显示信息。

手风琴组件

显示可折叠的内容面板，以便在有限的空间内呈现信息。

选择器

  • 手风琴

输入

  • closeOthers - 布尔值，如果为 true，则展开一项将关闭所有其他项

  • isAnimated - 布尔值，打开/关闭动画，默认值：false

AccordionPanel组件

手风琴标题

您可以在组内任何将用作组标题模板的元素上使用 Accordion-heading 属性，而不是在折叠组上使用标题属性。

选择器

  • 手风琴组、手风琴面板

输入

  • header - 字符串，手风琴组标题中的可点击文本

  • isDisabled - 布尔值，启用/禁用手风琴组

  • isOpen - 布尔值，手风琴组是打开还是关闭。该属性支持双向绑定

  • panelClass - 字符串，提供使用 Bootstrap 上下文面板类（面板主、面板成功、面板信息等）的能力。

输出

  • isOpenChange - 打开状态更改时发出

手风琴配置

配置服务，为 AccordionComponent 提供默认值。

特性

  • closeOthers - 布尔值，打开面板时是否应关闭其他面板。默认值：假

  • isAnimated - 布尔值，打开/关闭动画

例子

由于我们将使用 Accordion，因此我们更新了 app.module.ts 以使用AccordionModule，如ngx-bootstrap 环境设置章节中所示。

更新 test.component.html 以使用手风琴。

测试.component.html

<accordion>
   <accordion-group heading="Open By Default" [isOpen]="open">
      <p>Open By Default</p>
   </accordion-group>
   <accordion-group heading="Disabled" [isDisabled]="disabled">
      <p>Disabled</p>
   </accordion-group>
   <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)">
      <p>Open Event</p>
   </accordion-group>
</accordion>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   disabled: boolean = true;
   constructor() { }
   ngOnInit(): void {
   }
   log(isOpened: boolean){
      console.log(isOpened);
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

手风琴

Ngx-Bootstrap - 警报

警报为典型的用户操作（如信息、错误）提供上下文消息，并提供可用且灵活的警报消息。

警报组件

显示可折叠的内容面板，以便在有限的空间内呈现信息。

选择器

  • 警报，bs-警报

输入

  • missible - 布尔值，如果设置，则显示内联“关闭”按钮，默认值： false

  • missOnTimeout - 字符串 | number，以毫秒为单位的数字，之后警报将关闭

  • isOpen - 布尔值，警报是否可见，默认值：true

  • type - 字符串，警报类型。提供四个引导程序支持的上下文类之一：成功、信息、警告和危险，默认值：警告

输出

  • onClose - 该事件在调用 close 实例方法后立即触发，$event 是 Alert 组件的实例。

  • onClosed - 当警报关闭时触发此事件，$event 是警报组件的实例

警报配置

特性

  • missible - 布尔值，默认情况下警报是否可关闭，默认值： false

  • missOnTimeout - 数字，警报解除前的默认时间，默认值：未定义

  • type - 字符串，默认警报类型，默认：警告

例子

由于我们要使用警报，我们必须更新ngx-bootstrap Accordion章节中使用的 app.module.ts 以使用AlertModule和AlertConfig。

更新 app.module.ts 以使用 AlertModule 和 AlertConfig。

应用程序模块.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';
import { AlertModule, AlertConfig } from 'ngx-bootstrap/alert';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用警报。

测试.component.html

<alert type="success" 
   [dismissible]="dismissible"
   [isOpen]="open"
   (onClosed)="log($event)"
   [dismissOnTimeout]="timeout">
   <h4 class="alert-heading">Well done!</h4>
   <p>Success Message</p>
</alert>
<alert type="info">
   <strong>Heads up!</strong> Info
</alert>
<alert type="warning">
   <strong>Warning!</strong> Warning
</alert>
<alert type="danger">
   <strong>Oh snap!</strong> Error
</alert>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   dismissible: boolean = true;
   timeout: number = 10000;
   constructor() { }
   
   ngOnInit(): void {
   }
   log(alert){
      console.log('alert message closed');
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

警报

Ngx-Bootstrap - 按钮

ngx-bootstrap 按钮有两个特定指令，使一组按钮充当复选框或单选按钮或混合（其中单选按钮可以取消选中）。

按钮复选框指令

向任何元素添加复选框功能。

选择器

  • [btn复选框]

输入

  • btnCheckboxFalse - 布尔值，Falsy 值，将设置为 ngModel，默认值： false

  • btnCheckboxTrue - 布尔值，真值，将设置为 ngModel，默认值：true

按钮无线电指令

创建单选按钮或按钮组。所选按钮的值绑定到通过 ngModel 指定的变量。

选择器

  • [btn电台]

输入

  • btnRadio - 字符串，单选按钮值，将设置为 ngModel

  • 禁用- 布尔值，如果为 true - 单选按钮被禁用

  • uncheckable - 布尔值，如果为 true - 单选按钮可以取消选中

  • value - 字符串，无线电组件或组的当前值

ButtonRadioGroup指令

一组单选按钮。所选按钮的值绑定到通过 ngModel 指定的变量。

选择器

  • [btnRadioGroup]

例子

由于我们要使用按钮，我们必须更新ngx-bootstrap Alerts章节中使用的 app.module.ts 以使用ButtonsModule。我们还使用 FormModule 添加对输入控件的支持。

更新 app.module.ts 以使用 AlertModule 和 AlertConfig。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用按钮。

测试.component.html

<button type="button" class="btn btn-primary" (click)="clicked()">
   Single Button
</button>
<pre class="card card-block card-header">
   {{clickCounter}}
</pre>
<p>Button as Checkbox</p>
<div class="btn-group">
   <label class="btn btn-primary" [(ngModel)]="checkModel.left"
      btnCheckbox tabindex="0" role="button">Left</label>
   <label class="btn btn-primary" [(ngModel)]="checkModel.right"
      btnCheckbox tabindex="0" role="button">Right</label>
</div>
<pre class="card card-block card-header">
   {{checkModel | json}}
</pre>
<p>Button as RadionButton</p>
<div class="form-inline">
   <div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
      <label class="btn btn-success" btnRadio="Left">Left</label>
      <label class="btn btn-success" btnRadio="Right">Right</label>
   </div>
</div>
<pre class="card card-block card-header">
   {{radioModel}}
</pre>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   checkModel = { left: false, right: false };
   radioModel = 'Left';
   clickCounter = 0;
   constructor() { }

   ngOnInit(): void {
   }
   clicked(): void {
      this.clickCounter++;
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

纽扣

Ngx-Bootstrap - 轮播

ngx-bootstrap Carousel 用于创建图像或文本的幻灯片放映

轮播组件

创建轮播的基本元素。

选择器

  • 旋转木马

输入

  • activeSlide - 数字，当前显示幻灯片的索引（从 0 开始）

  • IndicatorByChunk - 布尔值，默认值： false

  • 间隔- 数字，项目循环延迟（以毫秒为单位）。如果为 false，轮播不会自动循环。

  • isAnimated - 布尔值，打开/关闭动画。动画不适用于多列表轮播，默认值： false

  • itemsPerSlide - 数字，默认值：1

  • noPause - 布尔值

  • noWrap - 布尔值

  • 暂停焦点- 布尔值

  • showIndicators - 布尔值

  • singleSlideOffset - 布尔值

  • startFromIndex - 数字，默认：0

输出

  • activeSlideChange - 当活动幻灯片更改时将发出。双向可绑定 [(activeSlide)] 属性的一部分

  • SlideRangeChange - 在多列表模式下更改活动幻灯片时将发出

幻灯片组件

选择器

  • 滑动

输入

  • active - 布尔值，当前幻灯片是否处于活动状态

例子

由于我们要使用轮播，我们必须更新ngx-bootstrap 按钮章节中使用的 app.module.ts 以使用CarouselModule。

更新 app.module.ts 以使用 CarouselModule。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用轮播。

测试.component.html

<div style="width: 500px; height: 500px;">
   <carousel [noWrap]="noWrapSlides" [showIndicators]="showIndicator">
      <slide *ngFor="let slide of slides; let index=index">
         <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
         <div class="carousel-caption">
			<h4>Slide {{index}}</h4>
            <p>{{slide.text}}</p>
         </div>
      </slide>
   </carousel>
   <br/>
   <div>
      <div class="checkbox">
         <label><input type="checkbox" [(ngModel)]="noWrapSlides">Disable Slide Looping</label>
         <label><input type="checkbox" [(ngModel)]="showIndicator">Enable Indicator</label>
      </div>
   </div>
</div>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
import { CarouselConfig } from 'ngx-bootstrap/carousel';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   providers: [
      { provide: CarouselConfig, useValue: { interval: 1500, noPause: false, showIndicators: true } }
   ],
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   slides = [
      {image: 'assets/images/nature/1.jpg', text: 'First'},
      {image: 'assets/images/nature/2.jpg',text: 'Second'},
      {image: 'assets/images/nature/3.jpg',text: 'Third'}
   ];
   noWrapSlides = false;
   showIndicator = true;
   constructor() { }

   ngOnInit(): void {
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

轮播

Ngx-Bootstrap - 折叠

ngx-bootstrap Collapse 指令有助于显示/隐藏容器内容。

崩溃指令

选择器

  • [坍塌]

输入

  • 折叠- 布尔值，指示内容可见性的标志（显示或隐藏）

  • 显示- 字符串

  • isAnimated - 布尔值，打开/关闭动画。默认值：假

输出

  • 折叠- 内容折叠后立即触发此事件

  • 折叠- 开始折叠时触发此事件

  • Expanded - 一旦内容可见，此事件就会触发

  • Expands - 当扩展开始时触发此事件

方法

  • toggle() - 允许手动切换内容可见性

  • hide - 允许手动隐藏内容

  • show - 允许手动显示折叠的内容

例子

由于我们要使用折叠，我们必须更新ngx-bootstrap Carousel章节中使用的 app.module.ts 以使用CollapseModule。

更新 app.module.ts 以使用 CollapseModule。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用 Collapse。

测试.component.html

<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="isCollapsed">Collapse</label>
   </div>
</div>
<div [collapse]="isCollapsed" [isAnimated]="true">
   <div class="well well-lg card card-block card-header">Welcome to Tutorialspoint.</div>
</div>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

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

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   isCollapsed: boolean = false;
   constructor() { }

   ngOnInit(): void {
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

折叠 打开

选中折叠复选框，内容将被折叠。

折叠关闭

Ngx-Bootstrap - DatePicker

ngx-bootstrap DatePicker 组件是高度可配置的，并且可以根据我们的需要进行定制。它提供了各种选项来选择日期或日期范围。

BsDatepicker指令

选择器

  • [bs日期选择器]

输入

  • bsConfig - Partial<BsDatepickerConfig>，日期选择器的配置对象

  • bsValue - 日期，日期选择器的初始值

  • 容器- 字符串，指定日期选择器应附加到的元素的选择器。默认：正文

  • dateCustomClasses - DatepickerDateCustomClasses[]，日期自定义类

  • dateDisabled - 日期[]，禁用特定日期

  • dateEnabled - Date[]，启用特定日期

  • dateTooltipTexts - DatepickerDateTooltipText[]，日期工具提示文本

  • daysDisabled - number[]，禁用一周中的某些天

  • isDisabled - 布尔值，指示日期选择器的内容是否启用

  • isOpen - 布尔值，返回当前是否显示日期选择器

  • maxDate - 布尔值，可供选择的最大日期

  • minDate - 布尔值，可供选择的最小日期

  • minMode - BsDatepickerViewMode，最小视图模式：日、月或年

  • externalClick - 布尔值，在外部点击时关闭日期选择器，默认值：true

  • externalEsc - 布尔值，在转义单击时关闭日期选择器，默认值：true

  • 位置- “顶部”| “底部”| “左”| “正确”，日期选择器的位置。接受：“顶部”、“底部”、“左”、“右”，默认：底部

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。默认：单击

输出

  • bsValueChange - 当日期选择器值更改时发出

  • onHidden - 当日期选择器隐藏时发出事件

  • onShown - 显示日期选择器时发出事件

方法

  • show() - 打开元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • hide() - 关闭元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • toggle() - 切换元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • setConfig() - 设置日期选择器的配置

BsDaterangepicker指令

选择器

  • [bs日期范围选择器]

输入

  • bsConfig - Partial<BsDaterangepickerConfig>，daterangepicker 的配置对象

  • bsValue - 日期，日期范围选择器的初始值

  • 容器- 字符串，指定日期范围选择器应附加到的元素的选择器。默认：正文

  • dateCustomClasses - DatepickerDateCustomClasses[]，日期自定义类

  • dateDisabled - 日期[]，禁用特定日期

  • dateEnabled - Date[]，启用特定日期

  • dateTooltipTexts - DatepickerDateTooltipText[]，日期工具提示文本

  • daysDisabled - number[]，禁用一周中的某些天

  • isDisabled - 布尔值，指示日期范围选择器的内容是否启用

  • isOpen - 布尔值，返回当前是否显示日期范围选择器

  • maxDate - 布尔值，可供选择的最大日期

  • minDate - 布尔值，可供选择的最小日期

  • minMode - BsDatepickerViewMode，最小视图模式：日、月或年

  • externalClick - 布尔值，在外部点击时关闭日期范围选择器，默认值：true

  • externalEsc - 布尔值，在转义单击时关闭日期范围选择器，默认值：true

  • 位置- “顶部”| “底部”| “左”| “右”，日期范围选择器的位置。接受：“顶部”、“底部”、“左”、“右”，默认：底部

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。默认：单击

输出

  • bsValueChange - 当 daterangepicker 值更改时发出

  • onHidden - 当日期范围选择器隐藏时发出事件

  • onShown - 显示日期范围选择器时发出事件

方法

  • show() - 打开元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • hide() - 关闭元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • toggle() - 切换元素的日期选择器。这被认为是日期选择器的“手动”触发。

  • setConfig() - 设置日期选择器的配置

例子

由于我们将使用 DatePicker 和 DateRangePicker ，因此我们必须更新ngx-bootstrap Collapse章节中使用的 app.module.ts 以使用BsDatepickerModule和BsDatepickerConfig。

更新 app.module.ts 以使用 BsDatepickerModule 和 BsDatepickerConfig。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot()
   ],
   providers: [AlertConfig, BsDatepickerConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新index.html以使用bs-datepicker.css。

应用程序模块.ts

<!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">
      <link href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet" >
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

更新 test.component.html 以使用日期选择器。

测试.component.html

<div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Datepicker"
         class="form-control"
         bsDatepicker
         [bsValue]="bsValue"
         [minDate]="minDate"
         [maxDate]="maxDate"
         [daysDisabled]="[6,0]"
         [datesDisabled]="disabledDates"
         [bsConfig]="{ isAnimated: true, dateInputFormat: 'YYYY-MM-DD' }">
   </div>
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker
         [(ngModel)]="bsRangeValue"
         [datesEnabled]="enabledDates"
         [bsConfig]="{ isAnimated: true }">
   </div>
</div>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

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

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   bsValue = new Date();
   bsRangeValue: Date[];
   maxDate = new Date();
   minDate = new Date();

   constructor() {
      this.minDate.setDate(this.minDate.getDate() - 1);
      this.maxDate.setDate(this.maxDate.getDate() + 7);
      this.bsRangeValue = [this.bsValue, this.maxDate];
   }

   ngOnInit(): void {
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

日期选择器

Ngx-Bootstrap - 下拉菜单

ngx-bootstrap 下拉组件是可切换的，并提供上下文覆盖来显示链接列表等。通过下拉指令，我们可以使下拉菜单具有交互性。

BsDropdown指令

选择器

  • [bsDropdown],[下拉]

输入

  • autoClose - 布尔值，表示单击项目或文档时以及按 ESC 键后将关闭下拉列表

  • 容器- 字符串，指定弹出框应附加到的元素的选择器。

  • dropup - 布尔值，该属性指示下拉菜单应向上打开。

  • insideClick - 布尔值，此属性指示当 autoClose 设置为 true 时，下拉列表不应在内部单击时关闭。

  • isAnimated - 布尔值，表示下拉列表将被动画化

  • isDisabled - 布尔值，禁用下拉菜单切换并隐藏下拉菜单（如果打开）

  • isOpen - 布尔值，返回当前是否显示弹出窗口

  • placement - 字符串，弹出框的位置。接受：“上”、“下”、“左”、“右”

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。

输出

  • isOpenChange - 当 isOpen 更改时发出事件

  • onHidden - 隐藏弹出窗口时发出事件

  • onShown - 显示弹出窗口时发出事件

方法

  • show() - 打开元素的弹出窗口。这被认为是弹出窗口的“手动”触发。

  • hide() - 关闭元素的弹出窗口。这被认为是弹出窗口的“手动”触发。

  • toggle() - 切换元素的弹出框。这被认为是弹出窗口的“手动”触发。

  • setConfig() - 设置弹出窗口的配置

例子

由于我们将使用下拉菜单，因此我们必须更新ngx-bootstrap DatePicker章节中使用的 app.module.ts 以使用BsDropdownModule和BsDropdownConfig。

更新 app.module.ts 以使用 BsDropdownModule 和 BsDropdownConfig。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule
   ],
   providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用下拉菜单。

测试.component.html

<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
   <button id="button-basic" dropdownToggle type="button" 
      class="btn btn-primary dropdown-toggle"
      aria-controls="dropdown-basic">
      Menu <span class="caret"></span>
   </button>
   <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">File</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Edit</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Search</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Recents</a>
      </li>
   </ul>
</div>
<button type="button" class="btn btn-primary" 
   (click)="dropdown.isOpen = !dropdown.isOpen">Show/Hide
</button>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

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

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   constructor() {}

   ngOnInit(): void {}
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。

落下

Ngx-Bootstrap - 模态框

ngx-bootstrap 模态组件是一个灵活且高度可配置的对话框提示，提供多个默认值，并且可以使用最少的代码。

模态指令

选择器

  • [bs模态]

输入

  • config - ModalOptions，允许通过元素属性设置模式配置

输出

  • onHidden - 当模式完成对用户隐藏时触发此事件（将等待 CSS 转换完成）​​。

  • onHide - 当调用 hide 实例方法时立即触发此事件。

  • onShow - 当调用 show 实例方法时，此事件立即触发。

  • onShown - 当模式对用户可见时触发此事件（将等待 CSS 转换完成）​​。

方法

  • show() - 允许手动打开模式。

  • hide() - 允许手动关闭模式。

  • toggle() - 允许手动切换模式可见性。

  • showElement() - 显示对话框。

  • focusOtherModal() - 事件技巧。

例子

由于我们要使用模式，我们必须更新ngx-bootstrap Dropdowns章节中使用的 app.module.ts 以使用ModalModule和BsModalService。

更新 app.module.ts 以使用 ModalModule 和 BsModalService。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule
   ],
   providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig,BsModalService],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用模式。

测试.component.html

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>

<ng-template #template>
   <div class="modal-header">
      <h4 class="modal-title pull-left">Modal</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
         <span aria-hidden="true">×</span>
      </button>
   </div>
   <div class="modal-body">
      This is a sample modal dialog box.
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
   </div>
</ng-template>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   modalRef: BsModalRef;
   constructor(private modalService: BsModalService) {}

   openModal(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template);
   }

   ngOnInit(): void {
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开http://localhost:4200。单击“打开模式”按钮并验证以下输出。

莫代尔

Ngx-Bootstrap - 分页

ngx-bootstrap 分页组件为您的站点或组件提供分页链接或分页器组件。

分页组件

选择器

  • 分页

输入

  • align - 布尔值，如果为 true，则将每个链接与寻呼机的两侧对齐

  • borderLinks - 布尔值，如果为 false 第一个和最后一个按钮将被隐藏

  • customFirstTemplate - TemplateRef<PaginationLinkContext>，第一个链接的自定义模板

  • customLastTemplate - TemplateRef<PaginationLinkContext>，最后一个链接的自定义模板

  • customNextTemplate - TemplateRef<PaginationLinkContext>，下一个链接的自定义模板

  • customPageTemplate - TemplateRef<PaginationLinkContext>，页面链接的自定义模板

  • customPreviousTemplate - TemplateRef<PaginationLinkContext>，上一个链接的自定义模板

  • DirectionLinks - 布尔值，如果 false 上一个和下一个按钮将被隐藏

  • 禁用- 布尔值，如果为 true 则分页组件将被禁用

  • firstText - 布尔值，第一个按钮文本

  • itemsPerPage - number，每页的最大项目数。如果值小于 1 将在一页上显示所有项目

  • lastText - 字符串，最后一个按钮文本

  • maxSize - 数字，寻呼机中页面链接的限制数量

  • nextText - 字符串，下一个按钮文本

  • pageBtnClass - 字符串，将类添加到 <li>

  • previousText - 字符串，上一个按钮文本

  • 旋转- 布尔值，如果为 true 当前页面将位于页面列表的中间

  • TotalItems - number，所有页面中的项目总数

输出

  • numPages - 当总页数发生变化时触发，$event:number 等于总页数。

  • pageChanged - 页面更改时触发，$event:{page, itemsPerPage} 等于具有当前页面索引和每页项目数的对象。

例子

由于我们要使用分页，我们必须更新ngx-bootstrap Modals章节中使用的 app.module.ts 以使用PaginationModule和PaginationConfig。

更新 app.module.ts 以使用 PaginationModule 和 PaginationConfig。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用模式。

测试.component.html

<div class="row">
   <div class="col-xs-12 col-12">
      <div class="content-wrapper">
         <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
      </div>
      <pagination [boundaryLinks]="showBoundaryLinks" 
         [directionLinks]="showDirectionLinks" 
         [totalItems]="contentArray.length"
         [itemsPerPage]="5"
         (pageChanged)="pageChanged($event)"></pagination>
   </div>
</div>
<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="showBoundaryLinks">Show Boundary Links</label>
      <br/>
      <label><input type="checkbox" [(ngModel)]="showDirectionLinks">Show Direction Links</label>
   </div>
</div>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   contentArray: string[] = new Array(50).fill('');
   returnedArray: string[];
   showBoundaryLinks: boolean = true;
   showDirectionLinks: boolean = true;
   constructor() {}

   pageChanged(event: PageChangedEvent): void {
      const startItem = (event.page - 1) * event.itemsPerPage;
      const endItem = event.page * event.itemsPerPage;
      this.returnedArray = this.contentArray.slice(startItem, endItem);
   }
   ngOnInit(): void {
      this.contentArray = this.contentArray.map((v: string, i: number) => {
         return 'Line '+ (i + 1);
      });
      this.returnedArray = this.contentArray.slice(0, 5);
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开http://localhost:4200。单击“打开模式”按钮并验证以下输出。

分页

Ngx-Bootstrap - 弹出窗口

ngx-bootstrap popover 组件提供了一个小的覆盖组件来提供有关组件的小信息。

弹出指令

选择器

  • 弹出窗口

输入

  • AdaptivePosition - 布尔值，设置禁用自适应位置。

  • 容器- 字符串，指定弹出框应附加到的元素的选择器。

  • containerClass - 字符串，弹出容器的 Css 类

  • 延迟- 数字，显示工具提示之前的延迟

  • isOpen - 布尔值，返回当前是否显示弹出窗口

  • externalClick - 布尔值，在外部单击时关闭弹出窗口，默认值： false

  • 位置- “顶部”| “底部”| “左”| “对”| “自动”| “左上角” | “右上角” | “右上”| “右下”| “右下角” | “左下角” | “左下”| “左上”，弹出框的位置。接受：“上”、“下”、“左”、“右”。

  • 弹出窗口- 字符串 | TemplateRef<any>，要显示为弹出窗口的内容。

  • popoverContext - 任意，如果 popover 是模板则使用的上下文。

  • popoverTitle - 字符串，弹出窗口的标题。

  • 触发器- 字符串，指定应触发的事件。支持空格分隔的事件名称列表。

输出

  • onHidden - 隐藏弹出窗口时发出事件。

  • onShown - 显示弹出窗口时发出事件。

方法

  • setAriaDescribedBy() - 为元素指令设置属性 aria-scribedBy 并为弹出窗口设置 id。

  • show() - 打开元素的弹出窗口。这被认为是弹出窗口的“手动”触发。

  • hide() - 关闭元素的弹出窗口。这被认为是弹出窗口的“手动”触发。

  • toggle() - 切换元素的弹出框。这被认为是弹出窗口的“手动”触发。

例子

由于我们将使用弹出窗口，因此我们必须更新ngx-bootstrap 分页章节中使用的 app.module.ts 以使用PopoverModule和PopoverConfig。

更新 app.module.ts 以使用 PopoverModule 和 PopoverConfig。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用模式。

测试.component.html

<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint." [outsideClick]="true">
   Default Popover
</button>
<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint."
   popoverTitle="Tutorialspoint" 
   [outsideClick]="true"
   placement="right">
   Right Aligned popover
</button>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   constructor() {}
   ngOnInit(): void {
   }
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开http://localhost:4200。单击“打开模式”按钮并验证以下输出。

弹出窗口

Ngx-Bootstrap - 进度条

ngx-bootstrap 进度条组件提供了一个进度组件，通过灵活的条显示工作流程的进度。

进度条组件

选择器

  • 进度条

输入

  • animate - 布尔值，如果为 true，进度条的变化值将被动画化。

  • max - 数字，进度元素的最大总值。

  • striped - 布尔值，如果为 true，则应用条带类。

  • type - ProgressbarType，提供四个受支持的上下文类之一：成功、信息、警告、危险。

  • 值-数字| any[]，进度条的当前值。可以是一些对象或数组，例如 {"value":15,"type":"info","label":"15 %"}。

例子

由于我们要使用进度条，我们必须更新ngx-bootstrap Popover章节中使用的 app.module.ts 以使用ProgressbarModule和ProgressbarConfig。

更新 app.module.ts 以使用 ProgressbarModule 和 ProgressbarConfig。

应用程序模块.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';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用模式。

测试.component.html

<div class="row">
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value"></progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="warning"
            [striped]="true">{{value}}%</progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="danger" 
            [striped]="true" [animate]="true"
            ><i>{{value}} / {{max}}</i></progressbar>
      </div>
   </div>
</div>

更新 test.component.ts 中相应的变量和方法。

测试组件.ts

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

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   max: number = 100;
   value: number = 25;
   constructor() {}

   ngOnInit(): void {
   } 
}

构建和服务

运行以下命令启动角度服务器。

ng serve

服务器启动并运行后。打开http://localhost:4200。

Ngx-Bootstrap - 评级

ngx-bootstrap 评级组件提供了一个可配置的评级组件，默认为星形栏。

评级组件

选择器

  • 评分

输入

  • 客户