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

问题描述

我正在阅读有关 Angular ViewChild 并与输入/输出参数进行比较的内容.只是好奇Viewchild 有没有什么缺点，或者输入/输出做不到?

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?

似乎 ViewChild 是首选路径，因为所有参数现在都位于 Typescript 中.这似乎比混合/混淆到 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.

来自 angular 文档的示例 - https://angular.io/api/core/ViewChild

example from angular docs - 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

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