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

Question

所以我有两个组件，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);
  });
}

不确定为什么参数为空。

请帮忙

Answer 1

首先，routerlink 指令在按钮类型方面存在问题，正如我在 github 上看到的第二件事，您正在使用元素引用将值传递给 router link 指令使用官方模型绑定方式 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]);
}

别忘了注入路由器

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

How to pass input value to different route using angular2?

angular

typescript

angular2-routing

angular2-router

routeparams