我正在搜索,并且正在从component.html
上的用户那里接收需要搜索的值。
我正在将数据发送到component.ts
,就像下面的代码一样。
<input class="form-control mr-sm-2" #query (keyup.enter)="search(query.value)">
<a class="btn btn-light my-2 my-sm-0" (click)="search(query.value)">Buscar</a>
在我的component.ts
中,我有以下代码
search(query: string) {
if (query !== '') {
window.location.href = 'http://mydomain/result.html?name=' + query;
}
}
我的疑问是,为什么window.location.href
总是在浏览器上current URL
上更改Firefox Developer Edition
,并且有时仅在Google Chrome
和{ {1}}。
如果我单击按钮,它会总是按预期运行,但是如果我按回车键,则它只能工作有时在其他2个浏览器上,而且我不知道为什么会这样,你们能帮我吗?
我在调试时注意到,当我按Enter键时,它没有调用函数Firefox Quantum
。
答案 0 :(得分:0)
实际上,您在使用async: true
时正在使用(keyup.enter)
。另外,您不需要引用(key.enter)
。您可以将输入写为:
#query
在方法中使用:
<input class="form-control mr-sm-2" (key.enter)="search($event)">
似乎FireFox正在捕获search(event: Event) {
const query = (event.target as HTMLInputElement).value;
if (query !== '') {
window.location.href = 'http://mydomain/result.html?name=' + query;
}
}
,而不是keyup
。
答案 1 :(得分:0)
我找到了解决方案,已将<input>
标签的内容和标签<a>
更改为<button>
,就像下面的代码一样
<input type="text" class="form-control mr-sm-2" [(ngModel)]="query" name="busca">
<button type="submit" class="btn btn-light my-2 my-sm-0" (click)="search()">Buscar</button>
在我的组件中,有下面的代码
export class MyComponent implements OnInit {
query = ''; // Global variable in my component
constructor() {}
ngOnInit() {
}
search() {
if (this.query !== '') {
window.location.href = 'http://mydomain/result.html?name=' + this.query;
}
}
}
在我的app.module.ts
上添加了以下几行
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Imported the FormsModule here
import { AppComponent } from './app.component';
import { MyComponent } from './my/my.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
MyComponent
],
imports: [
BrowserModule,
FormsModule // Added the FormsModule here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }