javascript - 在不知道完整路线的情况下按名称更改路线参数

Question

在 Angular 2 中，是否可以获取当前 URL，通过配置的名称修改参数，然后导航到它？

示例路线

path: 'home'
path: 'heroes/:universe'
path: 'villains/:universe'

有效的网址包括:

• > https://example.com/home
• > https://example.com/heroes/marvel
• > https://example.com/heroes/capcom
• > https://example.com/villains/marvel
• > https://example.com/villains/capcom

现在我想在根组件的某个位置选择 Universe。

// in App.component.ts
universe: string;  

---

<!-- in App.component.html -->
<select [(ngModel)]="universe" (ngModelChange)="navigateToUniverse($event)">
    <option value="marvel">Marvel</option>
    <option value="capcom">Capcom</option>
</select>

例子

• 当前路线是 /heroes/marvel 我选择 Capcom -> 导航到 /heroes/capcom
• 当前路线是 /villains/marvel 我选择 Capcom -> 导航到 /villains/capcom

在我的脑海中，我认为应该可以这样做:

// in App.component.ts
navigateToUniverse(universe: string): void {
    /*
    * 1. get the route config of the current ActivatedRoute
    *    eg. /heroes/:universe
    *   -or- /villains/:universe
    *    (or /home)
    * 2. replace the :universe parameter with the selected value
    * 3. call Router.navigate with the new URL
    * /
}

我已经卡在第一步了。 ActivatedRoute 中似乎没有任何内容可以为我提供当前路由的路由配置。

Answer 1

您可以从 activatedRoute 属性中获取此信息

constructor(protected activatedRoute: ActivatedRoute) {
}

public loadData() {
    var route = this.activatedRoute.routeConfig.path;
    console.log(route);
}

它将记录您当前的路线模板。 "users/:id" 在我的示例中。请检查。