Я пытаюсь выполнить двустороннюю привязку данных с использованием синтаксиса банана в поле, и мне нужно передать значение компоненту (compone), а затем другому компоненту (comptwo), где оно будет редактироваться.

Я ожидал, что привязка позволит отразить изменения в app.component. Однако я не могу этого сделать.

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

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

Отредактировано: для включения фрагментов кода из stackblitz:

App.Component.ts

export class AppComponent  {
  public _Name = 'Angular';  
}

app.component.html

From app.component.html : {{_Name}}

compone.component.ts

...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
{

  this._Name = value;
  this.NameChange.emit(value);

}
get Name():string
{
  return this._Name;

}
...

compone.component.html

...
<p>
compone works!
<app-comptwo [(Name)]="_Name"></app-comptwo>
{{_Name}}
</p>
...

comptwo.component.ts

...
public _Name:string = "";
@Output() NameChange:EventEmitter<string> = new EventEmitter<string>();
@Input()
set Name(value:string)
{

  this._Name = value;
  this.NameChange.emit(value);

}
get Name():string
{
  return this._Name;

}
...

comptwo.component.html

...
<p>
comptwo works! <input [(ngModel)]="_Name">
{{_Name}}
</p>
...

Как видно выше, app.component - это источник поля. Он передается в compone, а затем в comptwo. Компонент Comptwo - это то место, где поле изменяется с помощью тега ввода.

0
user3836415 27 Мар 2019 в 17:07

1 ответ

Лучший ответ

Если вы используете сеттер / геттер, вы должны привязать к ним события (в данном случае Name, а не напрямую к полю модели (_Name). В противном случае геттеры / сеттеры не будут вызываться, если вы привязаны к private _Field, поскольку вы буквально обходите сеттеры.

https://stackblitz.com/edit/angular-awlpfh

Результат использования привязок свойств:

enter image description here

Отредактировано:

Compone.component.html изменен с:

<app-comptwo [(Name)]="_Name"></app-comptwo>

К этому:

<app-comptwo [(Name)]="Name"></app-comptwo>
2
user3836415 28 Мар 2019 в 06:00