Angular组件之：ngx-bootstrap VS Angular Material part 1 —— Tabs

ngx-bootstrap是angular的一个UI组件库，是angular快速继承bootstrap3、bootstrap4、bootstrap5组件的最佳方式，可以有效地提高开发效率。

而angular material是angular团队构建的一个UI组件库。

我现在就来分别介绍一下ngx-bootstrap和angular material里的tabs组件。

首先是ngx-bootstrap tabs的安装使用, 你需要在项目里下载ngx-bootstrap,
ng add ngx-bootstrap
这是下载的命令，他会自动选择适合你当前项目angular版本的ngx-bootstrap版本。

然后在angular.json里的style里把bootstrap的样式全局引入
"styles": [
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
再在app.module.ts里把tabs引入并导入，
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

import { TabsModule } from 'ngx-bootstrap/tabs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TabsModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  
}
接下里就可以在项目里使用了
<div>tabs</div>
<div>
  <tabset>
    <tab heading="Basic title" id="tab1">Basic content</tab>
    <tab heading="Basic Title 1">Basic content 1</tab>
    <tab heading="Basic Title 2">Basic content 2</tab>
  </tabset>
</div>
看下效果

这是一个ngx-bootstrap tabs的基本使用。

接下来是angular material tabs的安装使用

这是在项目里下载angular material的命令
ng add @angular/material
同样，它也会自动安装适合当前项目angular版本的angular material版本。

在安装的时候它会给你三个选项，根据自己的情况来选择，我都是默认选择

选择一个预置的主题名或为自定义主题选择 “custom”：

你可以选择一个预置的 Material Design 主题或建立一个可扩展的自定义主题。

设置全局 Angular Material 排版样式：

是否为应用程序套用全局排版样式。

为 Angular Material 设置浏览器动画：

把 BrowserAnimationsModule导入到应用中，可以启用 Angular 的动画体系。拒绝它会使 Angular Material 中的动画失效。

安装完了在app.module.ts里把MatTabsModule引入
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

import { TabsModule } from 'ngx-bootstrap/tabs';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TabsModule.forRoot(),
    MatTabsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  
}
然后就可以使用了
<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
这是效果

ngx-bootstrap tabs和angular material tabs 功能都很丰富，能满足我们大部分需求。那它们有什么不同吗，在我看来有两个地方不太一样。

第一个就是angular material tabs自带动画

在切换标签的时候它是有动画的 (需要把BrowserAnimationsModule引入到应用)

第二个地方就是它们加载内容的方式不一样

ngx-bootstrap tabs它是一上来就把所有的内容加载好放进DOM里，不管你这个标签是否被激活
<tabset>
    <tab heading="Basic title" id="tab1">
      <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/B-lipaiZII8"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
    </tab>
    <tab heading="Basic Title 1">Basic content 1</tab>
    <tab heading="Basic Title 2">Basic content 2</tab>
  </tabset>
可以看到它已经把内容全部加载好了

而angular material tabs则不是这样，它也会把内容加载好，但是在选项被激活前它不会把内容插进DOM里，并且在你离开这个选项时，也会把内容从DOM里删除
<mat-tab-group>
  <mat-tab label="First">
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/B-lipaiZII8"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
可以看到1 3 都是空的，当你切换到第三个时

1 2 都是空的，3时有内容的。

这些加载方式都是默认的，我们可以通过设置来更改它们。

先是ngx-bootstrap tabs
<div>
  <tabset>
    <tab heading="Tab A" #tabA="tab">
      <div name="A" *ngIf="tabA.active">
        Content A
      </div>
    </tab>
    <tab heading="Tab B" #tabB="tab">
      <div name="B" *ngIf="tabB.active">
        Content B
      </div>
    </tab>
    <tab heading="Tab C" #tabC="tab">
      <div name="C" *ngIf="tabC.active">
        Content C
      </div>
    </tab>
  </tabset>
</div>
这样设置之后，内容就只会在选项激活时才加载，离开选项时销毁

然后是angular material tabs, 通常来说激活选项在加载内容，离开在销毁内容性能会比较好，angular material tabs也默认是这样，但有的时候我们离开选项并不想销毁内容，比容播放视频，

这个时候给mat-tab-group设置一个属性preserveContent为true就好了
<mat-tab-group preserveContent>
  <mat-tab label="First">
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/B-lipaiZII8"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
这个时候我播放视频，然后再切换选项再切换回来

内容并没有被销毁，视频还在播放。（注意，这个功能要angular material 14版本以上才支持）

Angular组件之：ngx-bootstrap VS Angular Material part 1 —— Tabs

猜你喜欢