与@output之间共享儿童父母.TS组件之间的对象

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和打字稿令人困惑的分享数据的方式。

我还尝试使用保存/获取共享服务而无用。

Answer 1

最终使用了更简单的方法。打开子组件时，我为在孩子创建的事件发射器上创建了一个subribr服务。

parent

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;
    });
  }

儿童

  onAdd = new EventEmitter();
  addWrapperToMetaDevize(devize){
      this.wrapperDev=devize;
      this.onAdd.emit(devize);
  }

Answer 2

这是我所做的，有10

在父html上

<child (dataChange)="updateData($event)"></child>

在父级TS

上

updateData(data: any): void {
    this.data = data;
}

在儿童TS

上

@Output() dataChange: EventEmitter<any> = new EventEmitter();
sendDataToParent(data: any) {
    this.dataChange.emit(data);
}