Как иметь два уровня роутера в приложении Clarity / Angular? - PullRequest
Новая
       26

Как иметь два уровня роутера в приложении Clarity / Angular?

0 голосов
/ 04 апреля 2020

Ясность / Angular newb ie вопрос ...

Я следую макету, описанному в Clarity документах, за исключением того, что я хочу ввести router-outlet в .content-container уровень, например: 

<div class="main-container">
  <div class="alert alert-app-level">...</div>

  <header class="header header-6">...</header>

  <nav class="subnav">...</nav>

  <div class="content-container">
    <router-outlet></router-outlet>
  </div> 
</div>

А потом ниже этого у меня есть ряд компонентов, которые являются одним из двух форматов макета ...

Layout # 1 - с боковой навигацией 

<div class="content-container">
  <nav class="sidenav" height="100%" style="background: chartreuse">
  </nav>

  <div class="content-area" height="100%" width="100%" style="background:brown">
    <router-outlet></router-outlet>
  </div>
</div>

Макет № 2 - без боковой навигации 

<div class="content-container"> 
  <div class="content-area">
    <router-outlet></router-outlet>
  </div>
</div>

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

enter image description here Как настроить компоненты nav и .content-area так, чтобы они занимали все доступное вертикальное и горизонтальное пространство?

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Проблема в том, что Angular внедряет дополнительный элемент DOM для хост-компонента, и это вызывает некоторые разрывы в макете. Вам не нужно добавлять хак CSS, сайт Clarity на самом деле делает нечто подобное.

См. https://github.com/vmware/clarity/blob/master/src/website/src/app/app.component.html для компонента приложения и в зависимости от того, какой маршрут вы go to, навигация добавляется этим маршрутом, а не глобально.

Если вы предпочитаете делать это глобально, я бы смог показать и скрыть sidenav условно на основе текущего маршрута, а не пытаться вложить его внутрь ( который нарушает структуру DOM).

0 голосов
/ 06 апреля 2020

Я нашел ответ после сканирования сети ... 

router-outlet.router-flex + * {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}


  <div class="content-container">
    <router-outlet class="router-flex"></router-outlet>
  </div>

... но на самом деле это проблема "левой руки не разговаривает с правой рукой" для более широкого проекта Angular. Невероятно, чтобы такая ключевая технология, как flex, была подорвана системой маршрутизации по умолчанию.

...