В Angular 9,как мы можем отключить /удалить кнопку, если пользователь переходит с текущей страницы на предыдущую страницу?

#html #css #angular

Вопрос:

На текущей странице есть кнопки «Назад» и «Далее», скажем, страница ABC. При нажатии кнопки «Далее» я окажусь на новой странице , скажем, на странице XYZ, на которой также есть кнопка «Назад». При нажатии кнопки «Назад» на странице XYZ, перейдя на страницу ABC, я не должен видеть кнопку «Назад» на странице ABC, что является обязательным требованием. Как я могу реализовать этот сценарий с помощью Angular 9?

Комментарии:

1. Является ли страница XYZ дочерним компонентом страницы ABC? Если это так, вы можете использовать ссылку Декораторы ввода и вывода

Ответ №1:

вы можете воспользоваться сервисом и сохранить «историю», затем нажать, когда навигация закончится, и нажать, когда кнопка «Назад».

Если ваш сервис похож на

 export class NavigationService {
  public history: string[] = [];

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        if (this.history[this.history.length - 1] != event.urlAfterRedirects)
          this.history.push(event.urlAfterRedirects);
      }
    });
  }

  back(): void {
    if (this.history.length > 1) {
      const route = this.history.pop();
      this.router.navigate([this.history[this.history.length - 1]]);
    }
  }
}
 

У вас может быть кнопка в компоненте, которая вводит конструктор как общедоступную службу навигации

 constructor(public navigationService:NavigationService) {}

<button [disabled]="navigationService.history.length<=1" 
        (click)="navigationService.back()">back</button>