如何从 routerLink 传递 2 个参数？答案

【问题标题】：How to pass 2 parameters from routerLink?如何从 routerLink 传递 2 个参数？
【发布时间】：2017-09-16 23:01:12
【问题描述】：

我正在尝试通过 routerLink 将 2 个参数传递给我的组件，然后传递给我的服务以获取数据。

Html 看起来像这样：-

  <h3><a routerLink="['/repository', {{res.owner.login}}, {{res.name}} ]">{{res.owner.login}}</a></h3>

在我的组件中，我有以下内容：-

ngOnInit() {
this._route.params
.map(params => params['userName,repoName'])
.subscribe((params) => {
  this.userName = params['userName']; this.repoName = params['repoName']
  console.log('params = ' + params)
  this._githubService.getRepo(params)
    .subscribe(repository => {
      this.repository = repository;
    })
  })
}

在我的服务中，我有以下代码：-

getRepo(params: any){
   let headers = new Headers();
   headers.append('Content-type', 'application/json');
   return this._http.get("https://api.github.com/repos/"+ params.userName +"/" + params.repoName+ "/commits&sort=stars&order=desc&page=1", { headers: headers, withCredentials: false })
      .map(this.extractRepo)
      .catch(error => this.handleError(error, this.router));

}

路由器配置如下：-

   import {ModuleWithProviders} from '@angular/core';
   import {Routes, RouterModule} from '@angular/router';

   import { HomeComponent } from '../app/components/home/home.component';
   import { RepositoryComponent } from 
    '../app/components/repository/repository.component';

   const appRoutes: Routes = [
       {path: '', component: HomeComponent, pathMatch: 'full'},
       {path: 'repository', component: RepositoryComponent}
   ];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

但是，当我运行应用程序时，链接显示如下：-

Error: Cannot match any routes. URL Segment: '%5B'/repository'%2C%20tetris%2C%20react-tetris%20%5D'

如何格式化 routerLink 并获取要发送到我的服务的参数？

感谢您的帮助和时间！

【问题讨论】：

标签： angular angular2-routing routerlink

【解决方案1】：

你需要把routerLink放在[routerLink]中。因为没有方括号，它就像你绑定到一个字符串，而字符串将是['/repository', {{res.owner.login}}, {{res.name}} ] 正是这个。

因此，每当您尝试绑定类中存在的内容时，都需要使用 []。例子： someVariable = 'http://etc..' 而不是绑定它，你使用[src]="someVariable"。如果你只是做src="someVariable" 这不是一个有效的链接，它只是一个字符串

另外，把上面的路由器配置贴出来会很有用

【讨论】：

我试过你的建议 Denko :-
{{res.owner.login}}
但我收到以下错误：- 解析器错误：得到插值 ({{}}) 其中表达式应位于 [['/repository 的第 16 列', {{res.owner.login}}, {{res.name}} ]] 在 HomeComponent@19:27
我还添加了路由器配置

【解决方案2】：

.map(params => params['userName,repoName']) 看起来不对。

你可以这样做

let {params} = this.route.snapshot;
this._githubService.getRepo(params)
.subscribe(repository => {
  this.repository = repository;
})

【讨论】：

【解决方案3】：

我终于发现了我的错误：-

所以在我的 app.routes.ts 中，我不得不将路由更改为：-

const appRoutes: Routes = [
   {path: '', component: HomeComponent, pathMatch: 'full'},
   {path: 'repository/:userName/:repoName', component: RepositoryComponent}
];

然后在我的 HTML 中，routerlink，我将其更改为以下内容：-

  <h3><a [routerLink]="['/repository', res.owner.login, res.name ]">{{res.owner.login}}</a></h3>

根据 Julia 的建议，组件变成了这样：-

ngOnInit() {
   let {params} = this._route.snapshot;
   this._githubService.getRepo(params)
   .subscribe(repository => {
     this.repository = repository;
     console.log(repository);
})

}

}

现在一切正常，我正在从服务中取回对象。

感谢你们俩的帮助，这使我朝着解决这个问题的正确方向前进！

【讨论】：