Angular - 兩路綁定

Question

我是 Angular 的初學者，我介紹了兩種方式綁定，但由於某種原因，我不明白我在下面做錯了什么，任何輸入都將不勝感激。

我只是想理解這個概念，所以下面的代碼相當簡單。 據我了解

將雙向綁定 [()] 添加到<app-child-comp>我將父字段“名稱”從父組件傳遞到父視圖，並使用屬性綁定為子組件提供初始化值（默認值）接收@Input 字段中的值。
一旦字段“@Input childName”使用正常插值獲得其值，我就可以在子模板中使用我喜歡的值。
現在通過定義一個 EventEmitter 然后使用 its.emit 方法，我應該能夠將變量上的任何更改傳遞回父組件並更新 DOM 屬性以反映更改。

問題：

現在這是我的問題，父->子方向綁定按預期工作，名稱“Fin”出現在父模板的輸入和子模板的插值中，但當我想改變子模板中的名稱並將其冒泡到父屬性，盡管它更新了子模板中的插值，但它無法更新。

我已經嘗試解決這個問題一段時間了，我正在研究的所有內容都說我做對了，但如果你能解釋一下我做錯了什么，我將不勝感激。

Answer 1

我添加了這個，以便未來的任何人都可以從我的錯誤中吸取教訓。

給定子組件，有兩種方法可以執行事件綁定

第一種方法是通過如下顯式聲明屬性和事件綁定<app-child-comp [childName]="name" (childNameChange)="name =$event"></app-child-comp>
第二種方法是使用“香蕉盒”方法，其中子標簽轉換為<app-child-comp [(childName)]="name"></app-child-comp>

我試圖使用第二種方法，但不清楚的是，當涉及到子組件中的字段名稱時，需要遵循一個命名約定才能使“香蕉方法”起作用

規則：如果您的@Input 字段被命名為“x”，那么您的@Output EventEmitter 需要被命名為“xChange”，“Change”是名稱的第二部分。

語法：輸入名稱 + 更改

因此，為了解決我的問題，我需要更改命名約定

@Input() childName:string;
@Output() changedName = new EventEmitter<string>();

至

@Input() childName:string;
@Output() childNameChange = new EventEmitter<string>();

Answer 2

您必須在根組件中添加 output ：

<app-child-app [(childName)]="name" (changedName)="name = $event"></app-child-app>