如何将 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;
}