如何在Angular中将输入值作为参数传递给路由器

Asalas77

我相信我要尝试的工作是微不足道的，但是我尝试了许多不同的事情，无法解决。

我有两个部分，SearchComponent并且DetailsComponent显示搜索结果。

路由模块：

const routes: Routes = [
{ path: '', component: SearchComponent},
{ path: 'armory/:name', component: DetailsComponent}
];

@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})

export class AppRoutingModule {}

和输入 search.component.html

<form class="form-inline container-fluid">
  <input type="text" id="name" placeholder="Character name..." class="form-control">
  <button (click)="onSearch( ... <!--name should be here-->)" class="btn">
    <span class="fa fa-search"></span></button>
</form>

然后在search.component.ts：

export class SearchComponent implements OnInit {

constructor(private router: Router) {
}

onSearch(name: string) {
   this.router.navigate(['/armory', name])
}
}

如何获取name输入的值并将其作为参数传递给onSearch()？

亨利·戴夫

如果要获取name的值，您可以像这样简单地为输入字段分配一个引用#name。这是您需要做的：

search.component.html

 <form class="form-inline container-fluid">
  <input type="text" id="name" #name  placeholder="Character name..." 
  class="form-control">
  <button (click)="onSearch(name.value)" class="btn">
   <span class="fa fa-search"></span></button>
  </form>

希望能帮助到你！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。