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

时间:2018-10-15 16:57:08

标签: javascript angular typescript

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

2 个答案:

答案 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 { }