Question

是否可以执行以下操作....

app.component.html

   <app-nav></app-nav>
    <div class="page-wrapper">
      <div class="page-content clearfix">
        <router-outlet></router-outlet>
       </div>
     </div>

当路由器指向特定page-wrapper并转到其他page-content之后，我可以将以下CSS应用于Component和Component类吗？

CSS

.page-content {
  margin-bottom: 0px;
}

@media screen and (min-width: 1367px) {
  .page-wrapper {
    width: 100%;
  }
}

我也尝试View Encapsulation选项（无），但这会将样式应用于标题，这始终是他们的......甚至我也会路由到其他Component。

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

Answer 1

您走在正确的轨道上，需要使用page-wrapper为page-content中显示的每个组件设置<router-outlet>和ViewEncapsulation.None的样式。因此，通过编写这样的样式，每次父元素（page-wrapper和page-content）样式都将基于组件覆盖。

@Component({
    selector: 'component-x',
    encapsulation: ViewEncapsulation.None,
    styles: [`
      .page-wrapper, .page-content{
          background-color: red;
      }
    `]
});


@Component({
    selector: 'component-y',
    encapsulation: ViewEncapsulation.None,
    styles: [`
      .page-wrapper, .page-content{
          background-color: green;
      }
    `]
});

Angular2 +样式父组件范围外的组件

1 个答案: