Question

我正在搜索，并且正在从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。

Answer 1

实际上，您在使用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。

Answer 2

我找到了解决方案，已将<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 { }

将输入从component.html发送到component.ts

2 个答案: