Как использовать addEventListener и postMessage в Angular?

Question

У меня проблема с addEventListener и postMessage.У меня есть диалоговое окно для входа, и там у меня есть кнопка, чтобы войти с Facebook.Когда пользователь нажимает на эту кнопку, открывается окно для входа в Facebook.Затем пользователь отправляет форму Facebook, и страница будет перенаправлена ​​на мою статическую HTML-страницу, которая пересылает некоторую информацию, используя postMessage.У меня есть метод addEventListener и handleMessage, который должен обрабатывать все сообщения, отправляемые со статической HTML-страницы, но метод handleMessage работает много раз, этот метод обрабатывает сообщения, которые я не отправляю с помощью postMessage.

Компонент входа:

constructor(public thisDialogRef: MatDialogRef<SigninComponent>, private auth: AuthService,
    private userService: UserService, private router: Router,
    private  alertwindow: AlertWindowsComponent) {
    if (window.addEventListener) {
        window.addEventListener("message", this.handleMessage.bind(this), false);
    }
    else {
      (<any>window).attachEvent("onmessage", this.handleMessage.bind(this));
    }
}

launchFbLogin() {
    this.authWindow = window.open(`https://www.facebook.com/v3.2/dialog/oauth?&response_type=token&display=popup&client_id=318651702058203&display=popup&redirect_uri=${this.url}facebook-auth.html&scope=email`,null,'width=600,height=400,top=400,left=400'); 
}
handleMessage(event: Event) {
    const message = event as MessageEvent;
    ...
}

Применение метода postMessage в статическом HTML-файле:

window.opener.postMessage(JSON.stringify(message), "http://localhost:4200");

Answer 1

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

handlerState = 0; // 0 - Not started, 1 - Being processed, 2 - Processed

constructor(public thisDialogRef: MatDialogRef<SigninComponent>, private auth: AuthService,
    private userService: UserService, private router: Router,
    private  alertwindow: AlertWindowsComponent) {
    if (window.addEventListener) {
        window.addEventListener("message", this.handleMessage.bind(this), false);
    }
    else {
      (<any>window).attachEvent("onmessage", this.handleMessage.bind(this));
    }
}

launchFbLogin() {
    this.authWindow = window.open(`https://www.facebook.com/v3.2/dialog/oauth?&response_type=token&display=popup&client_id=318651702058203&display=popup&redirect_uri=${this.url}facebook-auth.html&scope=email`,null,'width=600,height=400,top=400,left=400'); 
}
handleMessage(event: Event) {

    if (handlerState != 0) {
        return; // Already being processe or processed already.
    }

    handlerState = 1;

    const message = event as MessageEvent;
    ...

    handlerState = 2;
}