Angular4:带有@viewchild()的意外应用刷新

Question

我正在尝试通过@viewchild（）获取输入字段的值。但是，即使它似乎有效，这种方法仍会引发意外刷新到该应用中：

- 单击按钮触发事件后立即刷新

- app刷新一次，浏览纳维巴尔的应用程序

模板：

<input type="text" id="name" class="form-control" #nameInput>
<button class="btn btn-success" type="submit" (click)="addShop()">Add</button>
<p>{{shopName}}</p>

component.ts：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {
@ViewChild('nameInput') shopName:ElementRef;
@ViewChild('amountInput') shopAmount:ElementRef;
coucou:string;

addShop(){
    this.shopName = this.shopName.nativeElement.value;
}
  constructor() { }
  ngOnInit() {
  }
}

Answer 1

在按钮中删除type ="提交"，只需将其替换为type =" button"

更改以下行：

<button class="btn btn-success" type="submit" (click)="addShop()">Add</button>

to：

<button class="btn btn-success" type="button" (click)="addShop()">Add</button>

浏览器认为您正在提交表格，这就是为什么它会刷新页面

Answer 2

当按钮类型在form中提交时，在表单submit事件上，它尝试按表单级别上提供的action（属性）。如果form上没有操作属性，它将刷新页面。要停止此行为，您可以将按钮type更改为button（仅通过删除type属性无法解决问题，隐含的按钮具有submit类型）。

<button class="btn btn-success" type="button" (click)="addShop()">Add</button>

---

在Angular World中，您应该在form级别上使用(ngSumbit)="submit()"事件，然后将按钮类型保留为submit。ngSubmit事件抑制场景表格事件的背后。您可以从ngSubmit事件中指定的函数中进行AJAX调用。

标记

<form (ngSubmit)="addShop()" #heroForm="ngForm">
  <input type="text" id="name" class="form-control">
  <button class="btn btn-success" type="submit">Add</button>
  <p>{{shopName}}</p> 
</form>