如何將 CSS 添加到路由器出口元素

Question

我有一些看起來像這樣的代碼：

  <section>
    <div style="height: 100%; max-width: 10%; background-color: deepskyblue;">my content</div>
    <router-outlet style="height: 100%; min-width: 90%; background-color: gold;"></router-outlet>
  </section>

我希望 div 用作側邊欄，路由器插座占據剩余 90% 的空間。 但最終發生的事情是，從路由器插座顯示的內容被推到了 div 的下方，而不是在它旁邊。 似乎沒有 CSS 應用於路由器插座，因為背景顏色沒有改變。 有什么方法可以讓 CSS 更改此路由器插座？

Answer 1

簡單的解決方案是將路由器插座放在樣式 div 中。

 <section> <div style="height: 100%; max-width: 10%; background-color: deepskyblue;">my content</div> <div style="height: 100%; min-width: 90%; background-color: gold;"> <router-outlet ></router-outlet> </div> </section>

Answer 2

簡短回答使用：

:host { background: cornflowerblue; }

作為托管組件的css，更改路由器插座的背景。

---

長答案： Angular CSS 偽選擇器/修飾符您可以使用:host 修飾符影響托管組件。 如果您想更改路由器出口樣式，請將 css 添加到將托管的組件中。

例如，在顯示頁面編輯組件時將路由器插座更改為藍色。

// This is your routing to place your page component in the outlet when 
navigating to the edit/1 url.

const routes: Routes = [
  {
    path: 'edit/:pageId',
    component: PageComponent,
  }
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})

export class PageEditorRoutingModule {}

---

// PageComponent - stub of component to be rendered in outlet.
@Component({
  selector: 'app-page-editor',
  templateUrl: './page-editor.component.html', //implement as desired.
  styleUrls: ['./page-editor.component.scss']
})
export class PageEditComponent {
  // Your implementation
}

---

// Put this in your page-editor.component.scss to change the router outlet background blue
:host{
  background: cornflowerblue;
}