1

我试图通过 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 并获取要发送到我的服务的参数？

感谢您的帮助和时间！

4

3 回答 3

1

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

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

另外，如果您发布上面的路由器配置，这将很有用

于 2017-04-20T10:57:17.060 回答
1

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

所以在我的 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);
})

}

}

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

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

于 2017-04-20T15:26:42.530 回答
0

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

你可以做

let {params} = this.route.snapshot;
this._githubService.getRepo(params)
.subscribe(repository => {
  this.repository = repository;
})
于 2017-04-20T11:01:02.173 回答