如何獲得Angular的 <router-outlet> 使用CSS Grid

Question

我正在嘗試使用Angular 7和CSS Grid創建布局。 我的問題是router-outlet僅占用第二行的一列。

我在這里創建了StackBlitz 。

如您在app.component.css中看到的，我希望router-outlet （及其任何內容）占據grid-column: 2 / 5 app.component.css ，截至目前，它占據了2/3。

我要實現的目標有可能嗎？

Answer 1

<router-outlet>沒有大小，並且其中沒有任何內容，實際的路由器內容是它的下一個元素。 從<router-outlet>刪除樣式，僅將其應用於下一個元素，就可以了。

另外，您的app.component嘗試將樣式應用於未包含在組件中的組件。 您必須通過在組件定義中使用ViewEncapsulation.None來明確指定。 看到這里： https : //stackblitz.com/edit/angular-lmpnkl

Answer 2

我認為問題在於您嘗試將樣式直接應用於<router-outlet> 。 而是創建一個“ main div”元素，並將路由器出口放入其中。

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

我已更新您的堆疊閃電戰以進行演示。