Angular 在具有@OutPut的子父.ts组件之间共享对象

我有两个材质对话框组件。一个是父对象，在这一个中，按下按钮可以打开第二个。第二个是儿童，基本上是一种形式。通过提交此表单，我创建了一个应该发送到父组件的对象。我一直在尝试使用

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


}

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

父组件

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


}

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

父HTML

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

结果是子窗体被呈现到父窗体的模板中，并打印

devize

对象。因此，如果我想填写表单，我需要在父模板中填写，因为子模板没有正确呈现

最终目标是能够在父级的typescript中使用对象，而无需呈现子级的模板。所有在线示例都面向在父级模板中呈现消息，这不是我真正想要实现的。老实说，我发现这种使用html和typescript共享数据的方式非常令人困惑

---

我还尝试过使用Save/Fetch共享服务，但没有成功。

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

家长

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


}

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

  }

---

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