Question

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

感谢您的帮助和时间！

Answer 1

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

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

此外，如果您发布上面的路由器配置

将会很有用

Answer 2

我终于找到了我的错误： -

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

<script id="rowTemplate" type="text/x-kendo-template">
  # if (member.name.indexOf("DT_MEASURE") === 0 && member.name !== "DT_MEASURE") { #
      #: kendo.toString(kendo.parseDate(member.caption), "dd-MM-yyyy") #
  # } else { #
      #: member.caption.toString() #
  # } #
</script>

然后在我的HTML中，路由器链接，我将其更改为以下内容： -

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

并且该组件在Julia的建议中变得如此： -

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

}

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

感谢你们两位的帮助，这使我朝着正确的方向解决了这个问题！

Answer 3

.map（params =＆gt; params ['userName，repoName']）看起来不正确。

你可以做到

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

如何从routerLink传递2个参数？

3 个答案: