Как получить Angular'sработать с CSS Grid

Question

Я пытаюсь создать макет с Angular 7 и CSS Grid.У меня проблема в том, что router-outlet занимает только один столбец во второй строке.

Я создал StackBlitz здесь .

Как вы можете видеть вapp.component.css Я хочу, чтобы router-outlet (и любое его содержимое) занимало grid-column: 2 / 5, на данный момент это занимает 2/3.

Возможно ли то, чего я пытаюсь достичь?

Answer 1

Мне кажется, проблема в том, что вы пытаетесь применить стиль непосредственно к <router-outlet>.Вместо этого создайте элемент "main div" и поместите в него выход маршрутизатора.

<app-header></app-header>
<app-navbar></app-navbar>
<div main>
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

Я обновил ваш стек для демонстрации.

Answer 2

<router-outlet> не имеет размера и не содержит никакого содержимого, фактическое содержимое маршрутизатора является следующим элементом.Удалите стили из <router-outlet> и примените их только к следующему элементу, и все будет в порядке.

Кроме того, ваш app.component пытается применить стили к компонентам, которые не включены в ваш компонент.Вы должны указать это явно, используя ViewEncapsulation.None в определении компонента.Смотрите здесь: https://stackblitz.com/edit/angular-lmpnkl