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

Question

我经常发现自己想要在表单上按下按钮后将其禁用。所以我做了这样的事情：

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

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

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

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

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

Answer 1

@ViewChild 主要用于当您需要组件的实例及其属性时，通常作为父组件从子组件中抽象出一些逻辑。您将整个子 class 作为父 class 中的属性并可以随心所欲。它也被用作从 DOM.

中获取 DebugElement 的一种方法

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

话虽如此，使用 @viewChild 获取组件将允许您像使用模板绑定一样直接与其交互，尽管通常没有什么理由这样做。

话虽如此，您说的是拉取 HTML 元素的 @ViewChild。 shouldn't interact with the DOM directly in Angular. The framework completely abstracts the DOM from code, and there's reasons behind that.

有很多原因

我认为这里的最佳做法是让组件代表按钮的状态并允许 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，这会变得更加巧妙，因为您可以将禁用的属性绑定到表单的状态本身。甚至还有一些用于挂起提交状态和 asynchronous validators!.

的钩子

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

Angular use $event.target or ViewChild...is there a difference?

angular

angular7

viewchild