ViewChild与Angular中的输入/输出，是否有任何缺点或功能差异? [英] ViewChild vs Input/Output in Angular, any Disadvantages or capability difference?

问题描述

我正在阅读有关Angular ViewChild的内容，并与Input/Output参数进行比较.只是好奇Viewchild是否有任何劣势，或者无法执行Input/Output可以做的事情?

I am reading about Angular ViewChild and comparing to Input/Output parameters. Just curious if Viewchild has any disadvantages , or is unable to do something Input/Output can?

由于所有参数现在都位于Typescript中，因此ViewChild似乎是首选的路由.这似乎比混入/混入html标记更好.业务/数据逻辑参数现在可以放在一个地方.

It seems ViewChild is the preferred route, since all parameters are now located in Typescript. This seems better than mixing/muddling into the html markup. Business/data logic parameters can now be in one place.

ViewChild

@ViewChild(AddressTypeDropdownComponent, { static: false }) child: AddressTypeDropdownComponent;

ngAfterViewInit() {
  // Subscribe to the child component event
  this.child.addressTypeChange.subscribe(value => {
    console.log(value);
  });
}

someMethod() {
  // Set the input values of the child component
  this.child.addressTypeDefaultItem = someValue1;
  this.child.selectedAddressType = someValue2;
}

输入/输出

<app-address-type-dropdown 
    (addressTypeChange)="addressTypeChangeEvent($event)"
    [addressTypeDefaultItem]="someValue1"
    [selectedAddressType]="someValue2">
</app-address-type-dropdown>

推荐答案

说实话，这取决于您的喜好，我通常使用ViewChild/ren进行dom操作，类似于我们以前用jQuery更改本地HTML所做的操作元素，并使用input/output进行数据绑定并控制来自父级的子级组件的状态，以使其与外界隔离和保持无状态.

It depends on your preferences to be honest, I usually work with ViewChild/ren for dom manipulations similar to what we used to do with jQuery to change the native HTML element, and using input/output for data binding and controlling the state of a child component from the parent to keep him isolated and stateless.

角度文档示例- https://angular.io/api/core/ViewChild

您可以看到ID属性作为窗格组件的输入传递，而可见性是从父级管理的.

you can see the ID property is being passed as an input for the pane component, while the visibility is managed from the parent.

现在我们可以进行更改，以防万一pane中有一个按钮可以切换可见性，然后在pane组件中添加一个output，以便向父级发出切换状态更改，而父级仍然会使用viewChild来更改子级状态.

now we could have changed it in case we had a button inside the pane that toggles the visibility and then you'll add an output to the pane component that emits the toggle state change to the parent, and still the parent will utilise the viewChild to change the child state.

在技术问题和劣势方面，尝试自己设置子组件属性不是被动的，并且不会像input/output一样工作(因为Angular监视这些属性)，因此不会触发Angular的更改检测.

In terms of tech issues and disadvantages, trying to set the child component properties by yourself isn't reactive and won't trigger Angular's change detection the same way input/output works (Angular watch those properties by default).

测试这样的组件很困难，因为子组件不知道其状态，而父组件负责更改，因此您必须将它们作为一个组件进行测试.

Testing such a component is hard since the child component isn't aware of his state and the changes the parent takes care of, you'll have to test them as one.

通常，以这种方式更改组件属性是一个坏习惯，因为它会破坏Angular的changeDetection，并且您需要使用changeDetectorRef

In general it's bad practice to change the component attributes this way since it'll break Angular's changeDetection and you'll need to manually manage it with changeDetectorRef

这篇关于ViewChild与Angular中的输入/输出，是否有任何缺点或功能差异?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！