如何在 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;