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？