如何在 Angular 中從我們自己的組件中添加或刪除外部庫組件的 CSS 類

Question

我有一個包含外部庫組件的組件。 我想根據自己組件中的某些條件更改切換一類外部庫組件。 因此，在這里，我不能使用 ngClass。 我可以使用 document.querySelector 但我不想使用它。 還有其他方法嗎？

Answer 1

您可以在組件類中使用ViewChild來引用外部庫組件，配置 ViewChild 的read選項以將組件作為ElementRef提供給您，這樣您就可以切換 DOM 元素類。

例如，如果您的組件模板中的外部組件如下所示：

<div>
  <external-component class="toggle-me"></external-component>
</div>

您可以將模板引用變量附加到它，如下所示：

<div>
  <external-component #exComp class="toggle-me"></external-component>
  <!--                ^^ add this template reference variable  -->
</div>

然后在您的組件類中，使用 ViewChild 使用該模板引用變量獲取外部組件，指定{ read: ElementRef }以便您獲取其 DOM 元素而不是其組件類實例：

@ViewChild('exComp', { read: ElementRef }) externalComponent: ElementRef;

這樣，您就可以訪問nativeElement及其classList來切換類：

this.externalComponent.nativeElement.classList.toggle('toggle-me');

或者，如果您不想添加模板引用變量，或者無法添加，您可以將外部組件的類名而不是模板引用變量名傳遞給 ViewChild。

@ViewChild(ExternalComponent, { read: ElementRef }) externalComponent: ElementRef;