Angular 路由在全局导航中总是给我甚至使用相对路径

实际上，./布线意味着元件当前路由的相对位置，因为它在app.component中，相对位置是/，所以Angular 很好！

为了解决您的问题，您需要创建一个名为webspaces的组件，其中将包含<router-outlet/>，我们将订阅参数webSpaceName的最新值并将其存储在服务中.就像这样

Webspaces.com.ts

import { Component } from '@angular/core';
import { ActivatedRoute, RouterOutlet, Params } from '@angular/router';
import { WebspaceService } from '../webspace.service';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-webspaces',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './webspaces.component.html',
  styleUrl: './webspaces.component.scss',
})
export class WebspacesComponent {
  subscription: Subscription = new Subscription();
  constructor(
    private activatedRoute: ActivatedRoute,
    private webspaceService: WebspaceService
  ) {
    this.subscription.add(
      this.activatedRoute.params.subscribe((params: Params) => {
        this.webspaceService.webspace = params?.['webSpaceName'] || '';
      })
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

网站空间html

<router-outlet/>

在根组件中，当我们路由时，我们附加参数，然后执行路由，如下所示！

应用程序html

<nav>
  <a [routerLink]="['webspaces', webspace, 'properties']">Properties</a>
</nav>
<router-outlet></router-outlet>

应用程序TS

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterModule, RouterOutlet } from '@angular/router';
import { WebspaceService } from './webspace.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterModule, RouterLink],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'AppTest';

  get webspace() {
    return this.webspaceService.webspace;
  }

  constructor(private webspaceService: WebspaceService) {}
}

stackblitz->；cd test->；npm i->；npm run start