Angular - Двухстороннее связывание

Question

Я новичок в Angular, и я рассматриваю двустороннее связывание, но по какой-то причине я не понимаю, что я делаю неправильно с нижеприведенным, любой вклад будет оценен.

Я просто пытаюсь понять концепцию, поэтому приведенный ниже код довольно прост. В моем понимании

1. Добавление двухсторонней привязки [()] к <app-child-comp> Я передаю родительское поле «имя» из родительского компонента в родительское представление и, используя привязку свойства, обеспечивает значение инициализации (значение по умолчанию) для дочернего компонента, который получает значение в поле @Input.
2. После того, как поле "@Input childName" получит свое значение с помощью обычной интерполяции, я могу использовать значение как угодно в дочернем. template.
3. Теперь, определив EventEmitter и затем используя его метод .emit, я смогу передать любые изменения переменной обратно в родительский компонент и обновить свойство DOM, чтобы отразить эти изменения.

Проблема:

Теперь это моя проблема, родитель -> дочернее направление, привязки работают как положено, появляется имя "Fin" как я ожидаю на входе родительского Templat e и в интерполяции в дочернем шаблоне, но когда я хочу изменить имя в дочернем шаблоне и вернуть его обратно к родительскому свойству, он не обновляется, хотя обновляет интерполяцию в дочернем шаблоне.

Я пытался выяснить это сейчас некоторое время, и все, что я исследую, я чувствую, говорит, что я делаю это правильно, но если бы вы могли объяснить, что я делаю неправильно, я был бы очень признателен.

Answer 1

Я добавляю это, чтобы любой, кто заглядывал в будущее, мог узнать о моей ошибке.

Существует два способа связывания событий с учетом дочернего компонента

1. Первый способ заключается в явном объявлении привязок свойств и событий следующим образом: <app-child-comp [childName]="name" (childNameChange)="name =$event"></app-child-comp>

2. Второй способ заключается в использовании метода «Банановый ящик», в котором дочерний тег преобразуется в <app-child-comp [(childName)]="name"></app-child-comp>

Я пытался использовать второй метод, и что-то, что не сразу было понятно, - это соглашение об именах, когда речь идет об именах полей в дочернем компоненте, который необходим для выполнения , чтобы "Банановый метод" работал

Правило: Если ваше поле @Input имеет имя "x", то ваш @Output EventEmitter должен иметь имя " xChange "" Изменение "требуется в качестве второй части имени.

Синтаксис: inputName + Change

Поэтому, чтобы решить мою проблему, мне нужно было изменить соглашение об именах с

* 10 От 28 *

до

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

Answer 2

Вы должны добавить вывод в ваш root компонент:

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