routerLink路由参数不起作用

时间:2018-02-14 22:32:19

标签: javascript angular typescript

我的页面上有一个routerLink,但是我遇到了这个错误

基本上我有一个具有唯一ID的资产页面然后当你点击按钮时id改变并且路线应该更新,所以asset / sa3384320402应该更改为asset / i44309509439新id

enter image description here

我的routerLink如下

<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> - 只需将新路线添加到旧路线的末尾

2 个答案:

答案 0 :(得分:1)

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

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

或假设您已经在第1周路线,您可以通过省略第一个正斜杠来提供相对路径:

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

答案 1 :(得分:0)

尝试使用此按钮:

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