Как правильно использовать Angular Routing w / CSS grid - PullRequest
Новая
       5

Как правильно использовать Angular Routing w / CSS grid

1 голос
/ 05 марта 2020

У меня есть довольно простой c макет в <app-root>:

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'UI';
}

app.component. html: 

<app-navbar></app-navbar>
<router-outlet></router-outlet>

app.component. css

:host {
    display: grid;
    grid-template-rows: 63px 1fr;
    grid-template-columns: 1fr;
    height: 100vh;
    width: 100vw;
    grid-template-areas:
      "navbar"
      "main"
}

app-navbar {
    grid-area: navbar;
}

routing-outlet {
    grid-area: main;
}

Проблема, с которой я сталкиваюсь, заключается в том, что что угодно html шаблон, загруженный модулем маршрутизации, обрабатывается как третий шаблон на странице, что означает, что тег <routing-module> занимает весь 1fr вместо целевого шаблона, а затем целевой шаблон загружается как третий строка, которая обернута на нижней границе области просмотра.

У меня есть обходной путь, но кажется, что хак-у 

grid-template-rows: 63px 0 1fr;

Есть ли лучший / более стандартный подход к этому

1 Ответ

2 голосов
/ 05 марта 2020

лучше практики будут помещены <router-outlet></router-outlet> в <div class="router-wrapper"></div> и стиль, который div, как вы сделали с routing-module. Скорее всего, это может быть: 

.router-wrapper {
    grid-area: main;
}

В любом случае, вы допустили небольшую ошибку со стилем routing-module, потому что в вашем шаблоне есть тег <router-outlet></router-outlet>, а не routing-module.

...