实际上共享的代码没有任何重大问题,我认为问题可能出在根组件级别,请检查下面的 stackblitz 以供参考,如果仍然遇到问题,请分享回 stackblitz 并复制问题和详细信息需要修复什么!
主页组件!
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs';
import { MatDividerModule } from '@angular/material/divider';
@Component({
selector: 'app-home',
template: `<header>
<div>
<h1>CommunityPost</h1>
</div>
<button mat-raised-button color="primary" (click)="onLogout()">Log Out</button>
</header>
<mat-divider></mat-divider>
<main>
<nav mat-tab-nav-bar [tabPanel]="tabPanel">
<a mat-tab-link routerLink="/users" (click)="activeLink = '/users'"
[active]="activeLink == '/users'" > COMMUNITY</a>
<a mat-tab-link routerLink="/posts" (click)="activeLink = '/posts'"
[active]="activeLink == '/posts'" > POSTS </a>
</nav>
<mat-tab-nav-panel #tabPanel>
<router-outlet></router-outlet>
</mat-tab-nav-panel>
</main>`,
standalone: true,
imports: [RouterModule, CommonModule, MatTabsModule, MatDividerModule],
})
export class HomeComponent implements OnInit {
activeLink = '';
constructor() {}
ngOnInit() {}
onLogout() {}
}
Stackblitz Demo