Угловой материал: мат-диалог открывает несколько диалоговых окон.Отказаться от подписки?

Question

Я создаю небольшое угловое приложение с использованием предоставленного API НХЛ здесь .

Моя идея состояла в том, чтобы отобразить список всех игроков в команде и иметь возможность нажать наимя игрока и всплывающее диалоговое окно с его данными, с возможностью перейти на другую страницу с расширенными данными и статистикой, если пользователь решит.

Я использую диалоговое окно углового материала.

Мой подход заключается в нажатии на имя игрока, родительский компонент сначала вызовет 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')
     }))
   })
}
}

Итак, данные передаются и всплывающее окно работает, однако после закрытия диалогового окна и выбора нового проигрывателя на этот раз создаются 2 повторяющихся всплывающих окнас данными нового игрока (вместе с 2 логами консоли).Для третьего игрока создаются 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)
}

Буду признателен за любую помощь, спасибо.

Answer 1

вы на правильном пути, что проблема с подписками, поэтому вот решение

this.playersService
    .selectedPlayerUpdated
    .pipe(take(1))
    .subscribe((data)=>{
        this.selectedPlayer = data;

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

Используя оператор take(1) (вы также можете использовать fist()), вы автоматически отмените подписку после получения ровно одного результата из наблюдаемого, на которое подписаны.