Как я могу перенаправить на страницу без выполнения функции асинхронного ожидания после? - PullRequest
Новая
       21

Как я могу перенаправить на страницу без выполнения функции асинхронного ожидания после?

0 голосов
/ 25 мая 2020

Я разрабатываю компонент Angular 8, который нужно отображать в течение 4 секунд, а затем он направляется на определенную страницу (вход в систему), но на странице есть кнопка закрытия, и если я нажму ее до 4 секунд, должен перенаправить на другую страницу (домашнюю).

Я реализовал функцию сна, чтобы ждать 4 секунды, а затем он перенаправляется на страницу, которую я хочу (логин). Проблема в том, что если я нажимаю кнопку закрытия, он направляется на желаемую страницу (домой), но затем код из функции ожидания обрабатывается, и он направляется на другую страницу (вход в систему).

Как я могу сделать так, чтобы кнопка закрытия направлялась на главную страницу без перенаправления на страницу входа через 4 секунды?

Вот мой код:

My Component 

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { Router } from '@angular/router';
import { PreLoginPageModel } from '@app/features/form/children/pre-login-page/model/pre-login-page.model';
import { sleep, navigateTo, deleteFromLocalStorage } from '../../../../shared/utils/js.utils';

const PreLoginPageContent: PreLoginPageModel = require('../../infra/pre-login-page.json');

@Component({
  selector: 'app-pre-login-page',
  templateUrl: './pre-login-page.component.html',
  styleUrls: ['./pre-login-page.component.scss']
})
export class PreLoginPageComponent implements OnInit, AfterViewChecked {
  preLoginPageContent: PreLoginPageModel = PreLoginPageContent;
  icon = 'close';

  constructor(
    public router: Router
  ) { }

  ngOnInit() {
  }

  ngAfterViewChecked() {
    this.waitAndRedirect();
  }

  async waitAndRedirect() {
    await sleep(4000);
    navigateTo(this.router, 'form/login');
  }

  cancelLogin() {
    deleteFromLocalStorage('user-type');
    deleteFromLocalStorage('user-product');
    navigateTo(this.router, 'home');
  }

}

Функция сна 

export function sleep(ms: number) {
  return new Promise( resolve => setTimeout(resolve, ms) );
}

Мой компонент html

<div class="bv-c-pre-login-page">
  <div class="bv-c-pre-login-page-container">
    <div class="bv-c-pre-login-page-container__header d-flex">
      <mat-icon (click)="cancelLogin()">{{ icon }}</mat-icon>
    </div>
    <div class="bv-c-pre-login-page-container__body d-flex">
      <img class="bv-c-pre-login-page-container__image" src="assets/images/form/Group.svg"/>
      <div class="bv-c-pre-login-page-container__text">
        {{ preLoginPageContent.text }}
      </div>
    </div>
  </div>
</div>
...