數據如何從 html 文件傳輸到 component.ts 文件

Question

我正在用一個簡單的形式嘗試 angular2。 現在，當我使用 express 時，例如“name”輸入的值，可以在服務器中使用 req.body.name 訪問。 但是在 Angular 中它實際上是如何分配的？

在 clients.component.html 文件中，在輸入中，我同時具有 [(ngModel)]="name" 和 "name" = "name" 屬性。 在 clients.component.ts 文件中，我在 ClientsComponent class 下創建了一個名稱變量：

...
  templateUrl: './clients.component.html'
...
export class ClientsComponent{
name;
...
onSubmit(){
  let newClient = {
    name: this.name
    }
  }
}
...

現在代碼完美運行，所以應該沒有語法問題。 我想知道 Angular 如何識別 html 文件中的值。 是不是因為ts文件中包含了模板URL，所以那個模板里的每一個數據都會來到這個ts文件中？ 另外，是 ngModel 還是 html 中的 name 屬性必須等於 ts 文件中的 name 變量，還是其中三個必須相同？ 謝謝

Answer 1

name變量存在於 TS 文件中，您可以在模板中使用它。 如果 TS 文件中不存在該變量並且您在[(ngModel)]中使用它，則會引發錯誤。

[(ngModel)]="name"

[(ngModel)]稱為雙向數據綁定。 如果您更改模板中的值，它會在 TS 中更改，反之亦然。

雙向數據綁定是 Angular 的基本未來。

下面是它的工作原理：

<input [(ngModel)]="name">

<p>Hello {{name}}!</p> 

如果您輸入一個值，您可以立即在段落中看到它。 如果您在 TS 中更改 name 變量的值，那么您可以在輸入和段落中看到它。

[()]這使它成為雙向數據綁定。

Answer 2

基本上，Angular 對其組件樹使用層次結構。 這允許 Angular 從當前組件向下運行更改檢測（檢測組件中使用的值是否已更改）。 當您對輸入進行更改時，將調用 output 變量（語法的(ngModel)部分），從而更新 typescript/javascript 中的變量name 。

見https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10