角使用$ event.target或ViewChild…有区别吗？

Question

我经常发现自己想在按钮被按下后禁用它。 所以我做这样的事情：

<button (click)="complete($event.target)">

然后在我的打字稿文件中将其关闭，直到操作完成，如下所示：

complete(button: HTMLButtonElement): void {
    button.disabled = true;

    this.service.doSomething.subscribe(..., ..., () => button.disabled = false);
}

我可以通过标记按钮然后使用ViewChild来实现相同的ViewChild 。 除了个人喜好之外，是否有充分的理由使用一个与另一个？

Answer 1

@ViewChild主要用于需要组件实例及其属性的情况，通常作为父组件从子对象抽象一些逻辑。 您可以将整个子类作为父类的属性来获取，并可以使用它来做。 它也用作从DOM中获取DebugElement一种方法。

可以将模板绑定视为通过组件的“ API”与组件进行交互。 在这些交互可以提供完整功能的情况下，它使使用它的组件可以使用Inputs和Outputs 。 Angular在自己的区域中处理这些输入和输出，并更改检测周期。

话虽这么说，使用@viewChild获取组件将使您可以直接使用与模板绑定相同的方式与它进行交互，尽管通常没有什么理由这样做。

话虽如此，您谈论的是提取HTML元素的@ViewChild 。 有很多原因导致您不应该直接在Angular中与DOM交互 。 该框架将DOM从代码中完全抽象出来，这背后有其原因。

我认为这里的最佳做法是让组件代表按钮的状态，并允许Angular为您更改视图：

<button (click)="complete($event.value)" [disabled]="formDisabled">

component.ts：

public formDisabled = false;

complete(value: string): void {
    this.formDisabled = true;

    this.service.doSomething.subscribe(..., ..., () => this.disabled = false);
}

这样，当组件本身表示状态时，Angular便可以在框架内进行更改检测和视图渲染。

使用NgForms可以使代码更加NgForms ，因为您可以将disabled属性绑定到表单的状态本身。 对于挂起的提交状态和异步验证器，甚至还有一些钩子！ 。