如何使用angular2将输入值传递给不同的路线？答案

【问题标题】：How to pass input value to different route using angular2?如何使用angular2将输入值传递给不同的路线？
【发布时间】：2017-03-14 21:52:50
【问题描述】：

所以我有两个组件，HomePageComponent 和 StudentsViewComponent。在 HomePageComponent 我有一个输入标签：

<input type="text" #careerObj class="modules" placeholder="Career Objective ( software engineer)">
<button class="submit" routerLinkActive="active" [routerLink]="['/students', careerObj.value  ]">Search</button>

我想使用参数将此输入的值传递给 studentsViewComponent。

它重定向到正确的路由，但参数为空。该值始终为空，我不知道为什么。

这是我的路线：

  {
    path: 'students/:searchQuery',
    component: StudentsViewComponent
  },

ngOnInit() {
  this.activatedRoute.params.subscribe((params: Params) => {
    console.log(params);
  });
}

不确定为什么参数为空。

请帮忙

【问题讨论】：

您提供的代码示例没有任何问题。我复制了您的示例并且它有效...尝试使用 Select(val: string) { this.router.navigate(['/ad/' + val]); } 从您的组件更改路由以查找问题
您在重定向后的 url 中看到查询？
重定向时没有报错，但是查询为空，如""@BabarBilal
谢谢，您的解决方案有效，但我对您的解决方案有效的原因感到非常困惑。为什么我的方法行不通？您可以完整地提供您的答案，以便我接受您的解决方案。 @Brivvirs

标签： angular typescript angular2-routing angular2-router routeparams

【解决方案1】：

首先，routerlink 指令存在按钮类型问题，正如我最后在 github 上看到的，第二件事是您使用元素引用将值传递给路由器链接指令，使用官方模型绑定方式 routerlink 可能其中一个导致问题。试试这个，

 <input type="text" [(ngModel)]="route" class="modules" placeholder="Career Objective ( software engineer)">
 <button class="submit" routerLinkActive="active" [routerLink]="['/students', route]">Search</button>

或者

 <input type="text" [(ngModel)]="route" class="modules" placeholder="Career Objective ( software engineer)">
 <button class="submit" (click)="navigate()">Search</button>

并且使用这个函数的是组件

navigate(){
 this.router.navigate(["students", this.route]);
}

别忘了注入路由器

【讨论】：