[英]Angular use $event.target or ViewChild…is there a difference?
I frequently find myself wanting to disable a button once it has been pressed on a form. 我经常发现自己想在按钮被按下后禁用它。 So I do something like this:
所以我做这样的事情:
<button (click)="complete($event.target)">
and then in my typescript file I turn it off until the action is completed like so: 然后在我的打字稿文件中将其关闭,直到操作完成,如下所示:
complete(button: HTMLButtonElement): void {
button.disabled = true;
this.service.doSomething.subscribe(..., ..., () => button.disabled = false);
}
I could achieve that exact same thing by tagging the button and then using a ViewChild
instead. 我可以通过标记按钮然后使用
ViewChild
来实现相同的ViewChild
。 Other than personal preference, is there a good reason to use one vs. the other? 除了个人喜好之外,是否有充分的理由使用一个与另一个?
@ViewChild
is mainly for when you need an instance of a component and it's properties, usually as a parent component abstracting some logic away from the child. @ViewChild
主要用于需要组件实例及其属性的情况,通常作为父组件从子对象抽象一些逻辑。 You get the whole child class as a property in the parent class and can do what you will with it. 您可以将整个子类作为父类的属性来获取,并可以使用它来做。 It's also used as one method to grab a
DebugElement
off the DOM. 它也用作从DOM中获取
DebugElement
一种方法。
Template binding can sort of be thought of as interacting with a component via its "API". 可以将模板绑定视为通过组件的“ API”与组件进行交互。 It's made
Inputs
and Outputs
available to the component that's using it in situations where those interactions can provide full functionality. 在这些交互可以提供完整功能的情况下,它使使用它的组件可以使用
Inputs
和Outputs
。 Angular handles those inputs and outputs in its own zone and change detection cycles. Angular在自己的区域中处理这些输入和输出,并更改检测周期。
Having said that, using @viewChild
to get a component would allow you to interact with it directly the same way you'd do with template binding, though there's often little reason to do that. 话虽这么说,使用
@viewChild
获取组件将使您可以直接使用与模板绑定相同的方式与它进行交互,尽管通常没有什么理由这样做。
Having said that, you're talking about pulling a @ViewChild
of an HTML element. 话虽如此,您谈论的是提取HTML元素的
@ViewChild
。 There's a lot of reasons why you shouldn't interact with the DOM directly in Angular. 有很多原因导致您不应该直接在Angular中与DOM交互 。 The framework completely abstracts the DOM from code, and there's reasons behind that.
该框架将DOM从代码中完全抽象出来,这背后有其原因。
I think best practice here would be to let the component represent the button's state and allow Angular to alter the view for you: 我认为这里的最佳做法是让组件代表按钮的状态,并允许Angular为您更改视图:
<button (click)="complete($event.value)" [disabled]="formDisabled">
component.ts: component.ts:
public formDisabled = false;
complete(value: string): void {
this.formDisabled = true;
this.service.doSomething.subscribe(..., ..., () => this.disabled = false);
}
This lets Angular handle change detection and view rendering within the framework while the component itself represents state. 这样,当组件本身表示状态时,Angular便可以在框架内进行更改检测和视图渲染。
This can get even slicker with NgForms
, as you can bind the disabled property to the form's state itself. 使用
NgForms
可以使代码更加NgForms
,因为您可以将disabled属性绑定到表单的状态本身。 There's even some hooks for pending submission states and asynchronous validators! 对于挂起的提交状态和异步验证器,甚至还有一些钩子! .
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.