Угловой заменяющий компонент

Есть случай, когда данные отправляются из двух разных компонентов; скажем OneComponent и TwoComponent, и есть ResultComponent, который получает эти данные через Input() декоратор. Кроме того, в ResultComponent данные объединяются с использованием интерфейса OnChanges:

  ngOnChanges(changes: SimpleChanges) {
    if (changes['dataFromCompTwo']) {
      this.dataFromComp = this.dataFromCompTwo;
    }
  }

и данные отображаются в этом компоненте, но компонент создается дважды, а данные - двойными. Как проверить, отправлены ли уже данные от одного из компонентов, и показать только последние отправленные данные?

STACKBLITZ => Я хотел бы показать Вот результат только один раз .


typescript angular angular-components ngonchanges
person corry    schedule 15.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person Qortex    schedule 15.11.2018

arrow_upward
1
arrow_downward

если у вас есть два компонента, отправляющих изменения, вы можете получить к ним доступ, используя:

  • changes.componentOne
  • changes.componentTwo

У SimpleChanges есть другое свойство, называемое firstChange, которое вы можете использовать, чтобы проверить, является ли это первым изменением, исходящим от этого конкретного компонента, например:

  • changes.componentOne.firstchange - это будет означать, что это первое изменение, отправленное компонентами
person Mac_W    schedule 15.11.2018