如何防止对输入的关注？

Question

我试图在angular-material2中制作input。如果按可见性按钮，如何阻止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;
}