使用材质设计按钮的角7 innerHTML

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>';
    }
  }

在app.component.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

您不必为此使用指令，您可以使用角的本机代码来实现这一点。就像这样：

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

检查角质部的文档：

https://material.angular.io/components/form-field/overview#prefix-amp-suffix