重新加载时，Mat-tab 不在底层

问题描述

我使用的是来自 Material Design 和 Angular 的 mat-tab。当我点击一个标签时，它会变成 active 并带有下划线

然而，当我在浏览器上重新加载页面时，active 属性仍然是 true 但底层没有出现

有人知道如何解决这个问题吗？

HTML

    <nav mat-tab-nav-bar>

      <!-- About tab -->
      <a mat-tab-link 
         routerLink="{{links[0][1]}}" 
         (click)="activeLink = links[0][0]"
         [active]="activeLink == links[0][0]">
        {{links[0][0]}}
      </a>

      <!-- Revenue tab -->
      <a mat-tab-link 
         routerLink="{{links[1][1]}}" 
         (click)="activeLink = links[1][0]"
         [active]="activeLink == links[1][0]">
        {{links[1][0]}}
      </a>

    </nav>

TS

export class ProfileHeaderComponent extends SubscriptionContainerComponent implements OnInit {

  user: UserFirestore;
  links = [
    ['A propos','about'],['Revenu','revenue'],];
  activeLink = this.links[0][0];

  constructor(
    private route: ActivatedRoute,private router: Router,) {
    super();
  }

  ngOnInit(): void {
    // Set user and active link
    this.setUserAndActiveLink();
  }

  setActiveLink(): void {
    const isActiveProfile = this.router.isActive('/home/profile',true);
    const isActiveAbout = this.router.isActive('/home/profile/about',true);
    const isActiveRevenue = this.router.isActive('/home/profile/revenue',true);
    if (isActiveAbout || isActiveProfile) {
      this.activeLink = this.links[0][0];
    } else if (isActiveRevenue) {
      this.activeLink = this.links[1][0];
    } else {
      this.activeLink = undefined;
    }
  }

  setUserAndActiveLink(): void {
    this.subscription.add(
      this.route.data.subscribe((data: { user: UserFirestore }) => {
        // Set user
        this.user = data.user;
        // Set active link
        this.setActiveLink();
      })
    );
  }

解决方法

问题已解决

// Enable tab underlying on reload
document.body.style.display = "initial";

在组件构造函数中