Angular “角度材质：材质”对话框打开多个对话框。退订？

我正在使用提供的NHLAPI创建一个小的angular应用程序

我的想法是显示每个球队所有球员的列表，并能够单击球员的姓名，弹出一个对话框，显示球员的详细信息，如果用户选择，可以选择进入另一个页面，显示扩展的详细信息和统计信息

我正在使用角材质垫对话框

我的方法是单击一个玩家的名字，父组件将首先调用API来检索该玩家的数据，一旦解决了，将该数据传递给对话框组件

export class PlayersListComponent implements OnInit { 
team: string;
teamId: number; 
teamPlayers = [];
selectedPlayer;

constructor(private playersService: PlayersService,  private route: 
ActivatedRoute, private router: Router,  public dialog: MatDialog) { }

//additional code

getPlayerDetails(player){
 let playerId = +player.person.id
 this.playersService.getPlayerDetails(playerId)
 this.playersService.selectedPlayerUpdated.subscribe((data)=>{
   this.selectedPlayer = data;

   let dialogRef = this.dialog.open(PlayerPopupComponent, {
    data: this.selectedPlayer
   });
   dialogRef.afterClosed().subscribe((result=>{
     console.log('dialog was closed')
     }))
   })
}
}

所以数据被传递，弹出窗口工作，但在关闭对话框并选择一个新的播放器时，这一次，将使用新播放器的数据创建两个重复的弹出窗口（以及两个控制台日志）。对于第三个播放器，将创建3个弹出窗口，以此类推

我有一种感觉，我需要在某个地方取消订阅（不确定在哪里，因为订阅的父组件从未被销毁，只有弹出组件被销毁，但由于API调用是从父组件进行的，所以没有可观察到）

或者我的对话框函数的位置不正确

以下是条目组件：

export class PlayerPopupComponent implements OnInit, OnDestroy {
public thisPlayer;

constructor(public dialogRef: MatDialogRef<PlayersListComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }

ngOnInit() {
this.thisPlayer = this.data
console.log(this.thisPlayer)
}

导出类PlayerPopupComponent实现OnInit、OnDestroy{
公开播放；
构造函数（公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：any{}
恩戈尼尼特（）{
this.thisPlayer=this.data
console.log（this.thisPlayer）
}

---

任何帮助都将不胜感激，谢谢。

您的做法是正确的，问题在于订阅，因此这里有一个解决方案

this.playersService
。已选择播放更新
.管道（取（1））
.订阅（（数据）=>{
this.selectedPlayer=数据；
让dialogRef=this.dialog.open（PlayerPopupComponent{
数据：这是selectedPlayer
});
dialogRef
.afterClosed（）
.管道（取（1））
.subscribe（（结果=>{
console.log（'对话框已关闭'）
}))
})

谢谢！我对rxjs不太熟悉，所以我在寻找一个本机的Angle解决方案，但我没有想到这一点。效果非常好。