Высота нижнего колонтитула в соответствии с URL?

Question

У меня есть страница, на которой есть два разных маршрутизатора (url). Я хочу изменить высоту в соответствии с URL? Является ли это возможным? Как я могу этого достичь?

Например, если я использую Root-маршрутизатор, я хочу, чтобы высота нижнего колонтитула составляла 100 пикселей, а если я на другом URL-адресе, я хочу, чтобы высота составляла 64 пикселя?

Мой код выглядит примерно так

<view-router update-document-title testing>
        <ehr-welcome-page-view pattern="/"></ehr-welcome-page-view>
        <ehr-router-otherpattern="/other/*"></ehr-router-emis>
</view-router> 

<footer>
   <div class="footer-content-wrapper center-content border-right">
          <a href="http://www.mypage.co.uk/" target="_blank">
            <img src="./images/my-logotype.png" alt="MyLogotype">
          </a>
        </div>
        <p>Some text</p>
        </div>
</footer>

Answer 1

Вы можете использовать функцию для возврата класса на основе параметров маршрута, таких как url.

<app-route    route="{{route}}" />
<div class$="footer-content-wrapper [[_getFooterHeightClass(route.path)]]">

_getFooterHeightClass(path) {
  switch(path) {
    case '/path/a': 
      return 'height-a';
    case '/path/b': 
      return 'height-b';
  }
}