Question

我试图通过@ViewChild（）获取输入字段的值。但是，即使它似乎有效，此方法也会触发应用程序的意外刷新：

单击按钮触发事件

后，

-app会立即刷新

-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 =＆＃34;提交＆＃34;在按钮中，只需将其替换为类型=＆＃34;按钮＆＃34;

更改以下行：

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

到：

<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>

在角度世界中，您应该在(ngSumbit)="submit()"级别使用form事件，然后您可以将按钮类型保持为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>

Angular4：使用@ViewChild（）

2 个答案: