从父窗口关闭子窗口并检索数据

Question

我有一个 Web 应用程序，可以打开 Spotify 登录的登录窗口。登录后，我试图从父组件关闭子窗口并尝试从子窗口的 URL 检索参数。但是孩子的关闭功能不起作用。

此外，当我尝试在组件 HTML 中打印 params 时，它什么也没显示

这是我正在使用的代码

登录组件 HTML

<a href="#" (click)="login($event)">Login</a>
Child Params: {{ params }}  //Not showing anything

登录组件

private params: ISpotifyAuth | null;
private popup: Window | undefined;


ngOnInit(): void {
    const hash = window.location.search.substr(1);
    if (hash !== '' && hash !== undefined) {
        this.spotifyCallback(hash);
    }
}


login(event: MouseEvent) {
        event.preventDefault();
        const scopes = [
            'user-read-currently-playing',
            'user-read-recently-played',
            'user-read-playback-state',
            'user-top-read',
            'user-read-private',
            'user-read-email',
            'user-modify-playback-state'
        ];
        const url = `https://accounts.spotify.com/authorize?client_id=${
            environment.spotify.clientID
        }&response_type=code&redirect_uri=${
            environment.spotify.redirectUrl
        }&scope=${scopes.join('%20')}&show_dialog=true&state=34fFs29kd09`;

        const width = 550;
        const height = 650;
        const y = window.top.outerHeight / 2 + window.top.screenY - width / 2;
        const x = window.top.outerWidth / 2 + window.top.screenX - height / 2;

        this.popup = window.open(
            url,
            'Login with Spotify',
            `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${y}, left=${x}`
        ) as Window;
}


spotifyCallback(payload: any){
    this.popup?.close();  // Not working
    console.log(payload);  // Not working
}