如何使用CSS网格干净地使用角路由

Question

我在<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-module {
    grid-area: main;
}

我遇到的问题是，路由模块加载的任何html模板都被视为页面上的第3个模板，这意味着<routing-module>标记会占用整个1fr，而不是目标模板，然后将目标模板作为第三行加载，并包装在视口的底部边框上。

我有一种解决方法，但似乎很糟糕

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

是否有更好/更标准的方法？

Answer 1

更好的做法是将<router-outlet></router-outlet>放到<div class="router-wrapper"></div>中，并像设置routing-module一样设置div的样式。因此最有可能是：

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

无论如何，样式routing-module的确没犯错，因为模板中有<router-outlet></router-outlet>标记，而不是routing-module。