angular 6+ input輸入框 keyup.enter觸發其他button事件的細節問題

最近遇見一個問題；需求是：input可以通過回車實現和點擊button一樣的功能，看似狠簡單的一個問題；但是我卻發現了一個問題；先上圖；

 

 

 

 

 

我發現我回車后居然調用了兩次接口；部分html代碼：

<div nz-row [nzGutter]="8" nzType="flex" nzAlign="bottom">
      <div nz-col [nzXl]="16" [nzXXl]="18">
        <input nz-input formControlName="searchValue" placeholder="搜索關鍵字" (keyup.enter)="getSearchData(true)" />
      </div>
      <div nz-col [nzXl]="4" [nzXXl]="3">
        <button nz-button [nzType]="'primary'" nzBlock (click)="getSearchData(false)">
          搜索
        </button>
      </div>
      <div nz-col [nzXl]="2" [nzXXl]="1">
        <button nz-button (click)="resetForm()">重置</button>
      </div>
      <div nz-col [nzXl]="2" [nzXXl]="2">
        <button nz-button nzType="link" (click)="toggleCollapse()">
          {{ isCollapse ? '收起' : '展開' }}
          <i nz-icon [nzType]="isCollapse ? 'up' : 'down'"></i>
        </button>
      </div>
    </div>

一開始我以為是因為冒泡的問題；導致父級響應后觸發了所有事件，然后我就百度關於angular 冒泡的問題； 

申明一下，我現在使用的是angular 8的版本；雖然我標題上是6；這里我就要吐槽一下百度上的一部分大（hua）佬(li)心(hu)得(shao) 

搜一個關於angular+的冒泡事件，可能我見識短淺哈，網上都是關於angularJs的冒泡內容，然后搜到的都是各種花里胡哨的；其實我的想法狠簡單，我先解決問題，再去弄明白，整那么多花里胡哨的還解決不了問題還那么多粘貼復制的；

最后在一個stackoverflow 上一個外國程序員提到了這個問題，然后一個大佬解決了；雖然可能本身我就走偏了；但是我還是要吐槽一下；別說啥要專研前端技術，畢竟我夢想是想當一名裁縫的廚師

 

大致意思是這樣，問題是講button默認是觸發submit的提交功能，加上綁定的keyup.enter；就出現了調用兩次的問題；

解決方法是：為button 添加 type="button"屬性；

 

  <button nz-button [nzType]="'primary'" nzBlock type="button" (click)="getSearchData(false)"> 
          搜索
        </button>

 

然后在keyup.enter   發現不會觸發了；