使用 @OutPut 在子父 .ts 组件之间共享对象答案

【问题标题】：Share object between child-parent .ts components with @OutPut使用 @OutPut 在子父 .ts 组件之间共享对象
【发布时间】：2019-05-16 12:49:33
【问题描述】：

我有两个材质对话框组件。一个是父级，在这一个中通过按一个按钮打开第二个。第二个是孩子，基本上是一种形式。通过提交此表单，我创建了一个应该发送到父组件的对象。我一直在尝试使用 @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 和 typescript 共享数据的方式非常令人困惑。

我也尝试过使用 Save/Fetch 共享服务，但无济于事。

【问题讨论】：

为什么不尝试使用 ngxs 或 ngrx 并将对象存储在状态中？
不知道这是一个选项。谢谢，我会调查的。

标签： angular typescript angular-material

【解决方案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;
    });
  }

儿童

  onAdd = new EventEmitter();

  addWrapperToMetaDevize(devize){

      this.wrapperDev=devize;

      this.onAdd.emit(devize);

  }

【讨论】：

【解决方案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);
}

【讨论】：