Передача значения в дочерний компонент после его добавления в список родительского компонента - Angular - PullRequest
Новая
       31

Передача значения в дочерний компонент после его добавления в список родительского компонента - Angular

0 голосов
/ 19 февраля 2019

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

new-component отправляет элемент в the list-component

и после того, как он добавлен в список, давайте переместим его вперед на view-component, чтобы я мог видеть недавно добавленный элемент в случае, если я хочу что-то отредактировать -

И все работает нормальнопока я не хочу видеть его на view-component (он успешно добавлен в список и т. д.), вот мой код:

для нового элемента компонента отправляется в список: 

onSubmit() {
    this._viewService.save(this.view)
      .subscribe(
        (data: View) => {
          this.onSave.emit(data);
        }
  }

Поскольку список является родительским, список прослушивает этот излучатель. 

<view-new #addNew (onSave)="onAdd($event)"></view-new>

После того, как он выпущен, он доступен в методе onAdd, и до этой части все в порядке: 

onAdd(view: View) {
    this.receivedView = view;
    // And here I'm opening viewDisplay compnent which displaying info about recently addedd data
    this.viewDisplay.show();
}

Также в мой список, который является родительским компонентом, также включен компонент отображения, который должен отображать информацию о недавно добавленном элементе: 

  <view-display #displayView [view]="receivedView"></view-display>

И когда я открываю этот компонент, вызывая this.viewDisplay.show();

@Input() view: View;

Часть компонента отображения всегда пуста: 

show() {
    $('#' + this.id).modal('show');
    console.log("added - selected:view", this.view);
  }

this.view, который должен быть заполнен методом onAdd от parent и передан здесь, всегда пуст .. Я не знаю как ..

Спасибо, ребята

Cheers

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

вы обновляете поле recievedView в родительском элементе, которое привязано к полю view в дочернем элементе.Эта привязка осуществляется с помощью механизма обнаружения угловых изменений.В вашем методе onAdd вы пытаетесь вызвать метод viewDisplay.show() синхронно, до того, как будет выполнено обнаружение изменений, и, поскольку это поле еще не обновлено.Простейшим решением было бы назначить поле ребенка на месте, например 

onAdd(view: View) {
  this.receivedView = this.viewDisplay = view;
  this.viewDisplay.show();
}

, но, безусловно, есть лучшие варианты, которые зависят от вашего проекта

0 голосов
/ 19 февраля 2019

Angular должен знать, что значение зрения изменилось.Вы обычно делаете это, определяя setter .Определяя установщик, можно отслеживать изменения входной переменной.Вам также нужно определить частное свойство для сохранения значения. 

private _view: any;

@Input()
get view(): any) {
    return this._view;
}
set view(view: any) {
  this._view= view;
  // Do other stuff when "view" was updated
}

Вы также можете управлять связью через шаблон службы .

...