使用材质设计按钮创建HTML

Question

尝试为密码显示/隐藏功能创建角度指令。“显示/隐藏”可以工作，但是当尝试使用材质设计（mat）按钮时，它不会显示mat按钮，而是显示默认的html按钮。在我的指令中

  toggle(span: HTMLElement) {
    this._shown = !this._shown;
    if (this._shown) {
      this.el.nativeElement.setAttribute('type', 'text');
      span.innerHTML = '<button mat-raised-button color="primary">Hide</button>';
    } else {
      this.el.nativeElement.setAttribute('type', 'password');
      span.innerHTML = '<button mat-raised-button color="primary">Show</button>';
    }
  }

在应用程序中。组成部分html我确实有一些按钮作为测试，所以我知道mat正在工作。

<div>
  <button mat-raised-button>basic</button>
  <button mat-raised-button color="primary">primary</button>
</div>
<div>
  <label>Enter Password</label>
  <input type="password" appPassword>
</div>

我的问题是使用一个使用innerHTML的指令如何让材质设计按钮工作？

谢谢

Answer 1

您不必为此使用指令，您可以使用Angular的本机代码来实现这一点。大概是这样的：

 <mat-form-field>
    <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
    <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>

检查Angular的文档：
https://material.angular.io/components/form-field/overview#prefix-amp-suffix