如何防止专注于输入？

Question

我正在尝试使用inputangular-material2。如何防止focus在input如果我按知名度按钮？

在这里你可以看到它是如何工作的：material.angular.io

在按下按钮之前

按下按钮后

  <mat-form-field>
    <input
      #mPswd
      matInput
      type="password"
      placeholder="??? ??????-??????"
      [type]="hide ? 'password' : 'text'"
    >
    <mat-icon
      class="unselectable"
      matSuffix
      (click)="hide = !hide"
    >
      {{hide ? 'visibility' : 'visibility_off'}}
    </mat-icon>
  </mat-form-field>

Answer 1

单击图标时使用stopPropagation

// component.html
<mat-icon class="unselectable" matSuffix (click)="onIconClick($event)"></mat-icon>

// component.ts
onIconClick(event){
    event.stopPropagation();
    this.hide = !this.hide;
}