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

最后使用了一种简单得多的方法。当打开子组件时，我为在子组件上创建的事件发射器创建了一个订阅服务。

父母

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

  }

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

1 个答案: