我正在使用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();
})
);
}