碼云Git：Ionic4_Tabs

效果圖GIF：

1.gif

tabs.page.html：

1.png

TabsService.ts：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' //這樣就不必再App.module.ts 引入
})

export class TabsService {

  constructor() {
  }

  //顯示Tabs
  showTabs() {
    let elements = document.querySelectorAll(".tab");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'flex';
      });
    }
  }

  //隱藏Tabs
  hiddenTabs() {
    let elements = document.querySelectorAll(".tab");
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'none';
      });
    }
  }
}

app.component.ts：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { TabsService } from './service/TabsService';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(private router: Router,private tabsService: TabsService,) {
    this.toggleTabs();
  }
  //監(jiān)聽(tīng)路由來(lái)顯示或隱藏Tabs選項(xiàng)卡
  toggleTabs(){
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        console.log("event.url：" + event.url);
        if(event.url == '/tabs/home' || event.url == '/tabs/recommend' || event.url == '/tabs/find' || event.url == '/tabs/me'){
          this.tabsService.showTabs();
        }else {
          this.tabsService.hiddenTabs();
        }
      } 
    })
  }
}