添加 class 的简单指令不起作用

Question

我想根据两个条件将 class 添加到 div。为此，我创建了一个这样的指令：

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

@Directive({
  selector: '[confirmdialog-style]',
})
export class ConfirmDialogStyleDirective {
  @Input() isMsgDialog!: boolean;
  @Input() dialogType!: string;

  @HostBinding('class')
  elementClass = this.isMsgDialog ? 'x-' + this.dialogType : '';
}

我是这样使用的：

<div
  class="x-dialog-container"
  confirmdialog-style
  [isMsgDialog]="isMsgDialog"
  [dialogType]="dialogType"
>

我通过单击按钮在父组件中设置了 isMsgDialog 和 dialogType 属性。两个输入属性设置正确，正如我通过 chrome 调试工具检查的那样。

问题是，所需的 class（即 x-danger）未添加到 div。为什么这不起作用？

Answer 1

我觉得你的代码很好，我认为有必要验证 isMsgDialog 是否为空

Answer 2

试试这个，以便考虑 isMsgDialog 和 dialogType 变化：

    @HostBinding('class')
    get elementClass() {
        return this.isMsgDialog ? 'x-' + this.dialogType : '';
    }

添加 class 的简单指令不起作用

simple directive to add class doesn't work

typescript

angular-directive

angular