html - Angular-如何为一个 child 更改父 div 容器的 css 属性

Question

应用程序组件.html:

<div class="container">
   <router-outlet></router-outlet>
</div>

child1.componet.html:

<div class="panel panel-primary ">
  <div class="panel-heading">
........
</div>
</div>

child1.component.ts

@Component({
  selector: 'tb-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})

应用程序组件.css:

.container{
width:1200px
}

我希望只有 child1 的容器宽度应该是 1500px。有什么办法可以改变吗？

Answer 1

我可以通过在我的子组件中禁用 View 封装来覆盖子类的 css 类中的父类

 encapsulation: ViewEncapsulation.None