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>

我希望使用params将此输入的值传递给studentsViewComponent。

重定向到正确的路线，但参数是空的。该值始终为空，我不确定原因。

这是我的路线：

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

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

不确定为什么param是空的。

请帮忙

Answer 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]);
}

别忘了注入路由器

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

1 个答案: