@ViewChild和直接属性控制html元素css类之间有什么区别吗

Question

我使用Angular已经有一段时间了，当我需要控制ui css类时，通常我所做的是直接绑定属性来切换它的状态，例如：

// HTML
<div class="panel" [class.active]="isActive" (click)="toggleActive()">...</div>
// Angular
public toggleActive() {
this.isActive = !this.isActive;
}

使用@ViewChild也有可能获得同样的结果，例如：

// HTML
<div class="panel" #myPanel (click)="toggleActive()">...</div>
// Angular
@ViewChild('myPanel') myPanel!: ElementRef;
public toggleActive() {
const el = this.myPanel.nativeElement as HTMLElement;
el.classList.contains('active')
? el.classList.remove('active')
: el.classList.add('active');
}

我的问题是，这两种方法之间有什么区别吗？例如，性能影响、最佳实践等。有什么能证明以这样或那样的方式行事是合理的吗？

Answer 1

出于安全考虑，Angular建议使用模板来操作html元素。在ViewChild示例中，直接编辑元素。如果必须这样做，请按角度方式进行，并使用renderer2来主填充该元素的类列表。

但是，正如angular建议的那样，如果可能的话，尝试使用组件模板和组件类型脚本来准备模板的值。

我不认为这两方面的表现有任何不同。

所以我建议使用类绑定方式。

查看Aakash Garg的这篇精彩文章，了解更多详细信息。

Answer 2

简短的回答是：使用绑定，因为这是一种角度方式，如果您不喜欢绑定，请使用另一个框架mb。

长答案：在这个具体的例子中，两者都很好。当您直接添加不需要角度变化检测的类时(有些库使用这种方法来避免角度变化检测，它们将事件绑定到ofc区域之外(。0.

1. 让我们假设您想在ngOnInit中更改isActive-使用绑定可以做到这一点，但不需要添加超时。

2. 你可能有一些ngIf

   <div *ngIf="condition" [class.active]="isActive" ...
   

并且当condition为false时不能操作类3.你可能有几个元素

<div *ngIf="case === 1" [class.active]="isActive" ...
<div *ngIf="case === 2" [class.active]="isActive" ...

这就变得更加棘手了

4. 如果您尝试对innerHtml执行同样的操作，您可能会面临安全漏洞
5. 从体系结构的角度来看，当您的组件对模板一无所知时会更好。您不能为所有组件实现这一点，但您应该继续尝试