Angular 7 innerHTML 使用材料设计按钮答案

【问题标题】：Angular 7 innerHTML using a material design buttonAngular 7 innerHTML 使用材料设计按钮
【发布时间】：2020-04-14 07:31:03
【问题描述】：

尝试为密码显示/隐藏功能创建 Angular 指令。显示/隐藏有效，但是当尝试使用材料设计（垫子）按钮时，它不显示垫子按钮，而是显示默认的 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 的指令，我怎样才能让材料设计按钮工作？

谢谢

【问题讨论】：

你解决了吗？

标签： angular angular-material

【解决方案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

【讨论】：