无法导航至 ID 在 Angular 中的路线

Question

我在使用路由器时无法导航到带有 ID 参数的路由。

在我的组件中使用此代码

import { Router } from '@angular/router';
...
constructor(private router: Router) { }
...
public create() {
    ...
    this.router.navigate(['/category/edit', id]);
}

导致错误

Error: Cannot match any routes. URL Segment: 'category/edit;id=11'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at LastSubscriber.Subscriber._error (Subscriber.js:131)
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at LastSubscriber.Subscriber._error (Subscriber.js:131)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

如果在模板中使用它，效果很好

<tbody>
    <tr *ngFor="let category of model">
        <td>{{category.name}}</td>
        <td>{{category.code}}</td>
        <td>
            <button type="button" class="btn btn-outline-primary" [routerLink]="['/category/edit', category.id]">Edit</button>
        </td>
    </tr>
</tbody>

这是我的路线定义

{
    path: 'category/edit/:id',
    component: EditComponent,
    resolve: {
        model: CategoryResolver
    }
}

尝试过使用和不使用解析器，但都不起作用。

我正在使用 Angular 5.2.0 和 CLI 1.6.5

Answer 1

this.router.navigate(['/category/edit', id]);的结果是category/edit;id=11。当您传入对象而不是字符串时，将使用查询参数（如 ;id=11）。我想你的变量 id 是对象类型而不是字符串类型。

id: Object = {id: '11'};

应该改为

id: string = '11';

无法导航至 ID 在 Angular 中的路线

Unable to navigate to route with ID in Angular

typescript

angular-routing

angular

angular5