angular - routerLinkActive 在第一次加载时没有醒来

Question

当路由加载时，它不会应用“活动”类，但只有在我更改路由之后。我正在使用最新的 Angular 版本。

当我第一次加载所有者 html 时，底部栏从所有者 ts 文件中获取链接，并应标记（绿色）活动路线，但由于某种原因，它仅在我通过路线后才会发生（在底部栏中）

底栏.component.ts

<nav>
    <div class="container">
        <div class="link" *ngFor="let item of links">
            <button mat-button routerLink="/{{prefix || ''}}/{{item.routerLink}}" routerLinkActive="active"
                [routerLinkActiveOptions]="{exact:
                    true}">
                <div class="content">
                    <i class="material-icons-outlined">{{item.icon}}</i>

                    <span>{{item.label}}</span>
                </div>
            </button>
        </div>
    </div>
</nav>

*管理员路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import { AptsViewComponent } from './apts-view/apts-view.component';
import { OwnersViewComponent } from './owners-view/owners-view.component';
import { AccountViewComponent } from './account-view/account-view.component';

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        redirectTo: 'owners',
        pathMatch: 'full',
      },
      {
        path: 'owners',
        component: OwnersViewComponent,
      },
      {
        path: 'reports',
        component: AptsViewComponent,
      },
      {
        path: 'account',
        component: AccountViewComponent,
      },
    ],
  },
  {
    path: 'owners/:id',
    loadChildren: () =>
      import('./owner/owner.module').then((m) => m.OwnerModule),
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AdminRoutingModule {}

所有者路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OwnerComponent } from './owner.component';
import { AptsViewComponent } from './apts-view/apts-view.component';
import { ReportsViewComponent } from './reports-view/reports-view.component';
import { AccountViewComponent } from './account-view/account-view.component';

const routes: Routes = [
  {
    path: '',
    component: OwnerComponent,
    children: [
      {
        path: '',
        redirectTo: 'apartments',
        pathMatch: 'full',
      },
      {
        path: 'apartments',
        component: AptsViewComponent,
      },
      {
        path: 'reports',
        component: ReportsViewComponent,
      },
      {
        path: 'account',
        component: AccountViewComponent,
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class OwnerRoutingModule {}

owner.component.ts

import { Component, OnInit } from '@angular/core';
import { APIService, ListAptOwnersQuery } from 'src/app/API.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-owner',
  templateUrl: './owner.component.html',
  styleUrls: ['./owner.component.scss'],
})
export class OwnerComponent implements OnInit {
  owner;
  ownerID;
  backLink = '/admin';
  links = [
    { icon: 'home', label: 'נכסים', routerLink: 'apartments' },
    { icon: 'receipt_long', label: 'דו"חות', routerLink: 'reports' },
    { icon: 'account_circle', label: 'חשבון', routerLink: 'account' },
  ];
  linkPrefix;
  constructor(private apiService: APIService, private route: ActivatedRoute) {
    console.log(this.route);
    this.ownerID = this.route.snapshot.paramMap.get('id');
  }

  async ngOnInit() {
    this.owner = await this.apiService
      .GetAptOwner(this.ownerID)
      .catch((error) => {
        console.error(error);
      });
    this.linkPrefix = 'admin/owners/' + this.owner?.id;
  }
}

owner.component.html

<app-navbar *ngIf="!owner" [backLink]="true"></app-navbar>

<app-navbar *ngIf="owner" [title]="owner?.first_name +' '+ owner?.last_name" [backLink]="true"></app-navbar>

<div class="container">
    <router-outlet></router-outlet>
</div>

<app-bottom-bar [links]="links" [prefix]="linkPrefix"></app-bottom-bar>

标签： angulartypescriptrouterlinkactive