ViewChild 与 Angular 中的输入/输出，有什么缺点或能力差异吗？

Question

我正在阅读有关 Angular ViewChild 并与输入/输出参数进行比较的信息。只是好奇 Viewchild 是否有任何缺点，或者无法做 Input/Output 可以做的事情？

看来 ViewChild 是首选路线，因为所有参数现在都位于 Typescript 中。这似乎比混合/混淆到 html 标记中更好。业务/数据逻辑参数现在可以放在一个地方。

查看孩子

@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>

Answer 1

在已回答的内容之上添加。在HTML 上使用[ ] 和( ) 本身对其实现非常有描述性。 Angular 的整个概念围绕着 HTML component 展开。

当您开始将 DOM 分解为 components 时，它的可重用性会增加。当您使用此类组件时（例如我们使用 angular material ），您希望用户（将其作为库导入）知道作为 Input 的所有参数以及作为 Output 发出的所有参数。您在代码中看到这样的组件，您就会立即知道是什么使它起作用。

没有适当的表示，用户怎么知道？ Take a look at this example

使用@Input 和@Output：

<button mat-raised-button (click)="addColumn()"> Add column </button>
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
<button mat-raised-button (click)="shuffle()"> Shuffle </button>

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

没有

<button mat-raised-button #add> Add column </button>
<button mat-raised-button #remove> Remove column </button>
<button mat-raised-button #shuffle> Shuffle </button>

<table mat-table class="mat-elevation-z8">
  <ng-container *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

您更喜欢阅读哪个代码？

另外，您将如何处理(click)、(keyup) 或[routerLink] 等简单事件。

这些事情可以通过一些变通方法来实现，但它是否像现在这样可读且对开发人员友好？

有时，我们需要创建隔离的功能，以便我们可以轻松地了解其存在于代码中的原因。适用于所有语言的软件

Answer 2

说实话，这取决于你的喜好，我通常使用 ViewChild/ren 进行 dom 操作，类似于我们过去使用 jQuery 来更改原生 HTML 元素，并使用 input/output 进行数据绑定和控制状态来自父组件的子组件，以使他保持孤立和无状态。

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

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

现在我们可以更改它，以防我们在pane 中有一个按钮来切换可见性，然后您将添加一个output 到pane 组件，该组件向父组件发出切换状态更改，并且父母仍然会利用viewChild 来改变孩子的状态。

就技术问题和缺点而言，尝试自己设置子组件属性不是被动的，也不会像input/output 的工作方式一样触发 Angular 的更改检测（Angular 默认监视这些属性）。

测试这样的组件很困难，因为子组件不知道他的状态和父组件负责的更改，您必须将它们作为一个整体进行测试。

一般来说，以这种方式更改组件属性是不好的做法，因为它会破坏 Angular 的 changeDetection 并且您需要使用 changeDetectorRef 手动管理它