javascript - 如何使用 Angular 7 更改 CSS 类

Question

我正在使用 ngx-bootstrap 的 模态，我想用一些其他属性更改 CSS 类 modal-dialog。

我的问题是:如何在 Angular 中动态更改此类的属性？

我尝试过 ElementRef、TemplateRef 和 Rendere2 但没有找到任何解决方案。

提前感谢您的帮助。

编辑 1:

我正在使用 BsModalService 打开模式，所以我的模板如下所示:

<ng-template #defaultModalTemplate>
    Content
</ng-template>

我这样打开对话框:

public openModal(): void {
    this.modalRef = this.modalService.show(this.templateRef);

    if (this.renderer && this.templateRef) { // trying to extract .modal-dialog here

    }
}

变量 templateRef 定义如下:

@ViewChild('defaultModalTemplate') public templateRef?: TemplateRef<any>;

Answer 1

你可以通过 class binding 或 NgClass 来做到这一点

<div [class.className]="proerty(boolean)">some text or elements</div>

这里的属性如果 true 将激活/添加类 false 停用/删除

或

<div [ngClass]="{'className': expiration }">some text or elements</div>

通过这种方法，您不仅可以使用 class 并通过 expiration 控制它们，您还需要通过 , 将它们分开，就像这样 {'className': expiration, 'anotherClass': expiration }