Angular 8 如何添加/删除 CSS class 延迟

Question

我有一个 angular 组件，模板中有以下代码段

`<div class="articleContainer">
    <div class="mrFaqArticle {{listParent}} active">
        <ul class="choice">
            <li *ngFor="let intent of intents">
                <div class="bal">
                    <a class="label"(click)="selectIntent(intent)">{{intent.title}}</a>
                </div>
            </li>
        </ul>
    </div>
</div>`

以及使用 css 类执行简单 animation 的组件中的以下方法

`animateIntentList() {
    document.querySelector(".mrFaqArticle").classList.remove("fadeIn", "fadeOut");
    document.querySelector(".mrFaqArticle.active").classList.add("fadeOut");
    document.querySelector(".mrFaqArticle.active").classList.remove('active');

    setTimeout(()=>{
        document.querySelector(`.mrFaqArticle.${this.listParent} .choice`).classList.add('stagger');
        document.querySelector(`.mrFaqArticle.${this.listParent}`).classList.add('active', 'fadeIn');
    },320);
}`

有没有办法实现上述 using 指令，因为通过查询选择器访问 DOM 元素被认为是不好的做法。

Answer 1

您是否考虑过使用 ngClass 或 ngStyle？