Angular 角度自定义指令ngClass对象不工作

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

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对象放在component类中，它成功了。但在指令类中不起作用