Question

无法使用SharedService将数据一个组件传递到另一个组件

我创建了共享服务，

@Injectable()
export class SharedService{
    myData;
    constructor(){
      this.myData= {};
    }
    setMyData(val: object){

      this.myData= val;
    }
    getMyData(){

      return this.myData;
    }
}

我想传递数据＆＃39; DialogOverviewExample＆＃39;组件到＆＃39; DialogOverviewExampleDialog＆＃39;组件。

this.result = [{ "name":"John", "age":30, "car":null }];

上面的数据我尝试使用sharedService传递，但我没有在DialogOverviewExampleDialog组件中获取数据

@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
  providers:  [ SharedService ]
})

export class DialogOverviewExample {

  constructor(public dialog: MatDialog, private sharedService: SharedService) {}

    ngOnInit() {

      this.result = [{ "name":"John", "age":30, "car":null }];

        this.sharedService.setMyData(this.result);

  }

}

DialogOverviewExampleDialog组件

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
  providers:  [ SharedService ]
})


export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    sharedService: SharedService) 
    { 

      console.log(sharedService.getMyData());
    }



}

here is my code

Answer 1

每个组件中的问题都是X。 通过在每个组件中将服务声明为提供程序，您可以为每个组件创建唯一的单一服务。

您需要将服务提供给一个父组件或包含这两个组件的模块。

此StackBlitz 演示将服务声明为模块中的提供程序，其中包含两个组件 StackBlitz Demo

此Stack 演示如何将服务声明为父组件中的提供程序 StackBlitz Demo

无法使用角度中的SharedService将数据一个组件传递到另一个组件？

1 个答案: