Совместно использовать объект между дочерними и родительскими компонентами .ts с помощью @OutPut.

Question

У меня есть два компонента диалога материалов.Один является родителем, в этом, нажав кнопку, вы открываете второй.Второй - ребенок, и это в основном форма.Отправляя эту форму, я создаю объект, который должен быть отправлен в родительский компонент.Я пытался использовать декоратор @Output с небольшим успехом.Примите во внимание, что я предоставляю только необходимый код для обмена данными, оба компонента гораздо более сложны.

Дочерний компонент

@Component({
  selector: "wrapper-add-dev",
  templateUrl: "./wrapper-add-dev.html",
  styleUrls: ["./wrapper-add-dev.css"],
  providers: [DevizeService, ConfigService]
})

export class WrapperAddDevComponent implements OnInit {


@Output() wrapperOutput= new EventEmitter();


/**CODE THAT RETRIEVES THE REACTIVE FORM VALUE**/

///devize is the object i want to emit

  addWrapperToMetaDevize(devize) {
   this.wrapperOutput.emit(devize);

  }


}

РодительскийКомпонент

@Component({
  selector: 'metadevize-add',
  templateUrl: './metadevize-add.html',
  styleUrls: ['./metadevize-add.css']
})

export class MetaDevizeAddComponent implements OnInit {


showWrapper(event){
//printing the device into the console
  console.log(event);
}


}

Родительский HTML

<wrapper-add-dev (wrapperOutput)="showWrapper($event)"> </wrapper-add-dev>

В результате получается, что дочерняя форма отображается в шаблоне родителя, а devizeОбъект распечатан.Из-за этого, если я хочу заполнить форму, мне нужно сделать это в шаблоне родителя, потому что дочерний шаблон не отображается должным образом.

Конечная цель состоит в том, чтобы иметь возможность использовать объект в машинописном тексте родителя безрендеринг шаблона ребенка.Все примеры онлайн ориентированы на рендеринг сообщения в родительском шаблоне, чего я не хочу достичь.Честно говоря, я нахожу такой способ совместного использования данных с использованием html и машинописного текста довольно запутанным.

Я также пытался использовать общий сервис Save / Fetch безрезультатно.

Answer 1

Наконец-то использовали гораздо более простой подход. При открытии дочернего компонента я создал службу подписки на источник событий, созданный на дочернем компоненте.

Родитель

wrapperAddDevizeDialog() {
   this.isPopupOpened = true;
    const dialogRef = this.dialog.open(WrapperAddDevComponent, {
      data: {level: this.data.level+1}
    });

   //Subscription to Event Emitter
   dialogRef.componentInstance.onAdd.subscribe((result:any)=>{
      this.devizeWrapper=result;
      //I can use this.devizeWrapper as I want within the parent component.
    })


    dialogRef.afterClosed().subscribe(result => {
      this.isPopupOpened = false;
    });
  }

Child

  onAdd = new EventEmitter();

  addWrapperToMetaDevize(devize){

      this.wrapperDev=devize;

      this.onAdd.emit(devize);

  }