angular - Angular 中的 ViewChild 与输入/输出，任何缺点或功能差异？

Question

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

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

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>

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] .

这些事情可以通过一些工作来实现，但它是否像现在一样具有可读性和开发友好性？

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