Question

我创建了一个自定义指令来切换密码可见性。我的指令代码：

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[appPwdVisMng]'
})
export class PwdVisMngDirective {
  shown: boolean = false;
  eyeClass = {
    "ui": true,
    "eye": true,
    "slash": false,
    "link": true,
    "icon": true,
  }
  eyeSlashClass = {
    "ui": true,
    "eye": true,
    "slash": true,
    "link": true,
    "icon": true,
  }
  pwdClass = this.eyeClass;

  constructor() { }
  toggle(id) {
    if (!this.shown) {
      this.shown = !this.shown;
      this.pwdClass = this.eyeSlashClass;
      document.getElementById(id).setAttribute('type', 'text');
    } else {
      this.shown = !this.shown;
      this.pwdClass = this.eyeClass;
      document.getElementById(id).setAttribute('type', 'password');
    }
  }
}

并且我在组件模板中使用它，而HTML代码是

<div class="ui center aligned grid container">
  <h2>Chitchat</h2>
  <div class="row">
    <div class="ui five wide computer eight wide tablet  fifteen wide mobile column segment">
      <form class="ui form" method="post" novalidate>
        <h3>Reset Password</h3>       
        <div class="ui field">
          <div class="ui link icon input">
            <input type="password" name="pwd" id="pwd" placeholder="Password">
            <i appPwdVisMng [ngClass]="pwdClass" (click)="toggle('pwd')"></i>
          </div>
        </div>
        <button class="ui primary large button" type="submit">Change Password</button>
      </form>
    </div>
  </div>
</div>

我的问题是，指令中有一个ngClass对象，并在组件HTML代码中使用了它。但是这些课程不适用。我不知道为什么，我需要知道如何执行此操作，或者是否有任何标准方法可以执行此操作？

在与此部分相关的组件中，我也没有任何对象和方法。

谢谢。

角度自定义指令ngClass对象不起作用

0 个答案: