Question

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

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

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

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

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

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

Answer 1

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

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

话虽如此，但使用@viewChild获取组件可以使您直接与它进行交互，就像模板绑定一样，尽管通常没有什么理由这样做。

话虽如此，您正在谈论拉动HTML元素的@ViewChild。您在Angular中shouldn't interact with the DOM directly的原因很多。该框架从代码中完全抽象了DOM，并且有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更加流畅，因为您可以将Disabled属性绑定到表单状态本身。对于挂起的提交状态和asynchronous validators!，甚至还有一些钩子。

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

1 个答案: