Изменение цвета фона нижнего колонтитула при изменении маршрута в Angular

Question

Существует компонент нижнего колонтитула, первые две строки которого выглядят так:

footer.html

<footer class="footer" [class.footer_bg-white]="wide">
  <div class="footer__inner" [class.footer__inner_wide]="wide [class.footer__inner_auth]="!authorized">

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

footer.html

<footer class="footer" [class.footer_bg-white]="wide || isOffer">
  <div class="footer__inner" [class.footer__inner_wide]="wide [class.footer__inner_auth]="!authorized">

, поэтому, когда wide равно false, но мы на странице предложения isOffer установлено на true и нижний колонтитул должен стать белым.Ответственная за это часть в файле footer.ts выглядит следующим образом:

footer.ts

 ngOnChanges() {
    this.router.events.subscribe(
      event => {
        if (event instanceof NavigationStart && event.url === "/offer") {
          this.isOffer = true;
        }
      }
    );
  }

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

Как мне добиться желаемого поведения?

Answer 1

Первоначальное изменение маршрутизатора не будет зафиксировано, поскольку у вас есть footer внутри компонента.Вы должны получить текущий путь к маршрутизатору, чтобы он работал.

ngOnInit() {
  if(this.router.url === "/offer") {
    this.isOffer = true;
  }
}