javascript - routerLink 使用参数进行路由不起作用

Question

我有一个routerLink在我的页面上，转到某个路线，但我收到此错误

基本上，我有一个具有唯一 id 的 Assets 页面，然后当您单击按钮时，id 会发生变化，并且路线应该更新，因此 asset/sa3384320402 应该更改为 asset/i44309509439 新 id

我的router链接如下

<button [routerLink]="['/asset', newId]">click</button>

我的路由页面

@NgModule({
imports: [
    RouterModule.forChild([
        {
            path: '',
            children: [
                { path: 'week-1', component: Week1Component },
                { path: 'week-1/asset/:id', component: AssetPageComponent }
            ]
        }
    ])
],

和我的 asset-page.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Entry } from 'contentful';
import { ContentfulService } from '../../../contentful.service';

import * as _ from 'lodash';

declare var Player: any;
declare var Vimeo: any;

@Component({
  selector: 'app-asset-page',
  templateUrl: './asset-page.component.html',
  styleUrls: ['./asset-page.component.scss']
})
export class AssetPageComponent implements OnInit {
  asset: Entry<any>[];
  id: string;
  videoID: string;

  constructor(
    private contentfulService: ContentfulService,
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    this.route.paramMap
    .switchMap((params: ParamMap) => this.contentfulService.getAsset(params.get('id')))
    .subscribe((asset) => {
      this.asset = asset;
      console.log(this.asset);
    });
   }
}    

我不确定发生了什么，因为如果我去那条路线，它确实可以不通过 routerLink 工作？

如有任何帮助，我们将不胜感激!

谢谢

编辑

我尝试了以下方法并得到了这些结果

<button [routerLink]="['/week-1/asset', newId]">click</button> - 与上面相同的错误

<button [routerLink]="['asset/', newId]">click</button> - 只是将新路线添加到旧路线的末尾

<button [routerLink]="['asset', newId]">click</button> - 只是将新路线添加到旧路线的末尾

Answer 1

您尝试访问的路径是“/asset/:id”，但您的路线定义为“/week-1/asset/:id”。因此，您要么需要提供路由器链接的完整路径，如下所示:

<button [routerLink]="['/week-1/asset', newId]">click</button>

或者假设您已经位于 week-1 路线，您可以通过省略第一个正斜杠来提供相对路径:

<button [routerLink]="['asset', newId]">click</button>