角使用$ event.target或ViewChild…有區別嗎？

Question

我經常發現自己想在按鈕被按下后禁用它。 所以我做這樣的事情：

<button (click)="complete($event.target)">

然后在我的打字稿文件中將其關閉，直到操作完成，如下所示：

complete(button: HTMLButtonElement): void {
    button.disabled = true;

    this.service.doSomething.subscribe(..., ..., () => button.disabled = false);
}

我可以通過標記按鈕然后使用ViewChild來實現相同的ViewChild 。 除了個人喜好之外，是否有充分的理由使用一個與另一個？

Answer 1

@ViewChild主要用於需要組件實例及其屬性的情況，通常作為父組件從子對象抽象一些邏輯。 您可以將整個子類作為父類的屬性來獲取，並可以使用它來做。 它也用作從DOM中獲取DebugElement一種方法。

可以將模板綁定視為通過組件的“ API”與組件進行交互。 在這些交互可以提供完整功能的情況下，它使使用它的組件可以使用Inputs和Outputs 。 Angular在自己的區域中處理這些輸入和輸出，並更改檢測周期。

話雖這么說，使用@viewChild獲取組件將使您可以直接使用與模板綁定相同的方式與它進行交互，盡管通常沒有什么理由這樣做。

話雖如此，您談論的是提取HTML元素的@ViewChild 。 有很多原因導致您不應該直接在Angular中與DOM交互 。 該框架將DOM從代碼中完全抽象出來，這背后有其原因。

我認為這里的最佳做法是讓組件代表按鈕的狀態，並允許Angular為您更改視圖：

<button (click)="complete($event.value)" [disabled]="formDisabled">

component.ts：

public formDisabled = false;

complete(value: string): void {
    this.formDisabled = true;

    this.service.doSomething.subscribe(..., ..., () => this.disabled = false);
}

這樣，當組件本身表示狀態時，Angular便可以在框架內進行更改檢測和視圖渲染。

使用NgForms可以使代碼更加NgForms ，因為您可以將disabled屬性綁定到表單的狀態本身。 對於掛起的提交狀態和異步驗證器，甚至還有一些鈎子！ 。