使用名称而不是路径的 Angular 2 路线导航答案

【问题标题】：Angular 2 route navigation with name instead of path使用名称而不是路径的 Angular 2 路线导航
【发布时间】：2018-02-10 04:18:43
【问题描述】：

我正在使用 Angular cli 版本 - 1.6.0 这些路线我都用过。

App.module.ts

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'tutorial', component: TutorialComponent },
];

我使用这样的导航

App.component.ts

this.router.navigate(['/tutorial']);

App.component.html

<div class="nav-menu-blocks">
        <a routerLinkActive="w--current" [routerLink]="['/tutorial']" class="nav-link w-nav-link">About</a>
      </div>

这些运行良好，但我希望使用名称而不是路径或 url 进行路线导航。我不想在所有组件中包含我的导航网址。我只需要为我的路线设置名称，并希望在所有组件中使用该名称进行路线导航。

可以这样使用吗？任何人都可以帮助解决这个问题吗？提前致谢。

【问题讨论】：

标签： angular routing routes angular2-routing

【解决方案1】：

据我了解，您想使用名称而不是直接路径。您可以通过制作 Route.ts 文件来做到这一点。

例如-

// route.ts file
export class Route {
public static TUTORIAL = 'tutorial';
}

并在您想使用的任何地方使用该文件。

this.router.navigate(['/' + Route.TUTORIAL]);

<div class="nav-menu-blocks">
    <a routerLinkActive="w--current" [routerLink]="tutorialUrl" class="nav-link w-nav-link">About</a>
  </div>

// TS file
get tutorialUrl() {
return ['/' + Route.TUTORIAL];
}

这种方法的好处是，将来如果您想更改该路径，则无需在任何地方进行更改。只需在 Route 文件中更改即可。

希望这会有所帮助。

【讨论】：