如何使用 Angular 7 更改 CSS 类答案

【问题标题】：How to change a CSS class using Angular 7如何使用 Angular 7 更改 CSS 类
【发布时间】：2019-04-25 02:23:50
【问题描述】：

我正在使用ngx-bootstrap's modals，我想用其他一些属性更改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>;

【问题讨论】：

为什么不ngClass 或ngStyle？
ngClass 或 ngStyle
我正在使用 ng-template 从打字稿打开模式，请参阅更新的答案。所以我不知道如何通过这种方法使用 ngClass 或 ngStyle :)
你试过原生访问元素'document.querySelector('selector').style.cssProperty = newVal'
@AmirFawzy 我已经使用文档使它工作了。就这么简单：document.getElementsByClassName('modal-dialog')。这给了我一个 HTMLCollectionOf 我可以在其中获取第一个元素，如果不是未定义的，则更改其属性

标签： javascript html css angular sass

【解决方案1】：

我刚才确实需要使用它，并找到了一种适合我的方法。你可以这样做：

    <div class="{{className}}">
     Content
    </div>

并且每当您更改类的值时，它将应用于 DOM。

您可以使用您想要的任何类初始化变量 className，然后将其更改为您想要的任何类。这是多主题的应用程序，您可以使用它做更多的事情，例如创建服务并更改另一个组件中的类，然后将该 className 发送到您更改类然后更改主题的组件。

快乐编码?

【讨论】：

【解决方案2】：

您可以通过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 }

【讨论】：

感谢您的建议-但这不是添加/删除类吗？我想更改 DOM 中的一个类 - 特别是“modal-dialog”CSS 类。