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

Question

我正在使用 Material 设计的 mat-tab，Angular。当我单击一个选项卡时，它会变成 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();
      })
    );
  }

Answer 1

问题已解决

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

在组件构造函数中

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

Mat-tab not underlying when reload

angular

material-design

mat-tab

reloading