Angular中如何将输入框值作为参数传入路由？

我来给你讲两种常用的解决办法，都是Angular里很常规的操作，你可以根据自己的需求选择：

方法一：使用模板引用变量（最简单直接） #

这种方法不需要修改组件类的逻辑，直接在模板里通过引用变量获取输入框的值：

1. 给输入框添加一个模板引用变量，比如#nameInput：

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

2. 按钮点击时，直接把引用变量的value属性传给onSearch方法就行，你的search.component.ts代码不用改，保持原来的样子就好。

模板引用变量是Angular提供的直接访问模板DOM元素的方式，这种方式适合只需要在点击时一次性获取值的场景，代码简洁。

方法二：使用双向数据绑定（适合需要实时访问值的场景） #

如果之后你需要在组件类里实时获取输入框的内容（比如做输入验证、实时提示），可以用双向数据绑定[(ngModel)]：

1. 首先在你的模块（比如AppModule）里导入FormsModule，不然ngModel会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

2. 在search.component.ts里定义一个变量来绑定输入值：

export class SearchComponent implements OnInit {
  characterName: string = ''; // 定义绑定变量

  constructor(private router: Router) { }

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

3. 在模板里用[(ngModel)]把输入框和组件变量绑定起来，点击时直接传这个变量：

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

这样一来，输入框的内容会实时同步到characterName变量里，你在组件类的任何地方都能访问到它，灵活性更高。

内容的提问来源于stack exchange，提问作者Asalas77