Question

有什么办法可以在不全局影响子组件的情况下从子组件修改父组件的css属性？

我尝试了以下选项-
1在子级中使用ViewEncapsulation.None，然后修改父级组件的样式（即类）。但这会更改所有组件的样式。

2.使用默认的ViewEncapsulation并使用/deep/，这也会全局更改样式。

这是生成的样式-

<nb-layout-column _ngcontent-vnq-c1="" class="my-component"><router-outlet _ngcontent-vnq-c0=""></router-outlet><ngx-support-chat _nghost-vnq-c14="" class="ng-star-inserted"><div _ngcontent-vnq-c14=""><div _ngcontent-vnq-c14="" class="card" style="border: transparent"><div _ngcontent-vnq-c14="" class="card-header" style="background-color: #edf1f7; border: transparent"><div _ngcontent-vnq-c14="" style="display: flex; justify-content: space-between"><div _ngcontent-vnq-c14="" style="flex-basis: 11%; display: flex;"><nb-icon _ngcontent-vnq-c14="" icon="message-square-outline" style="height: 40px; width: 40px; margin-right: 10px;" _nghost-vnq-c8="" ng-reflect-icon="message-square-outline"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" class="eva eva-message-square-outline" fill="currentColor"><g data-name="Layer 2"><g data-name="message-square"><rect width="24" height="24" opacity="0"></rect><circle cx="12" cy="11" r="1"></circle><circle cx="16" cy="11" r="1"></circle><circle cx="8" cy="11" r="1"></circle><path d="M19 3H5a3 3 0 0 0-3 3v15a1 1 0 0 0 .51.87A1 1 0 0 0 3 22a1 1 0 0 0 .51-.14L8 19.14a1 1 0 0 1 .55-.14H19a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm1 13a1 1 0 0 1-1 1H8.55a3 3 0 0 0-1.55.43l-3 1.8V6a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1z"></path></g></g></svg></nb-icon><h4 _ngcontent-vnq-c14="">Chat</h4></div><div _ngcontent-vnq-c14="" style="flex-basis: 50%;"><input _ngcontent-vnq-c14="" fieldsize="large" fullwidth="" nbinput="" placeholder="Search" type="text" ng-reflect-field-size="large" ng-reflect-full-width="" class="input-full-width size-large shape-rectangle"></div></div></div><div _ngcontent-vnq-c14="" style="display: flex"><nb-card-body _ngcontent-vnq-c14="" style="background-color: #edf1f7; flex: 1; overflow: hidden; padding: 0; margin: 0;"><div _ngcontent-vnq-c14="" class="row top"><div _ngcontent-vnq-c14="" class="col"><nb-select _ngcontent-vnq-c14="" placeholder="all" style="background: #edf1f7;" _nghost-vnq-c9="" ng-reflect-placeholder="all" class="appearance-outline size-medium shape-rectangle"><button _ngcontent-vnq-c9="" class="select-button placeholder" type="button" ng-reflect-klass="select-button" ng-reflect-ng-class="placeholder"><!--bindings={
  "ng-reflect-ng-if": "0",
  "ng-reflect-ng-if-else": "[object Object]"
}-->all<!----><nb-icon _ngcontent-vnq-c9="" aria-hidden="true" icon="chevron-down-outline" pack="nebular-essentials" _nghost-vnq-c8="" ng-reflect-icon="chevron-down-outline" ng-reflect-pack="nebular-essentials"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="100%" height="100%" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"></rect><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"></path></g></g></svg></nb-icon></button><!----></nb-select></div><div _ngcontent-vnq-c14="" class="col"> Status </div><div _ngcontent-vnq-c14="" class="col"> Date </div></div><div _ngcontent-vnq-c14="" class="row top data"><div _ngcontent-vnq-c14="" class="col"><nb-user _ngcontent-vnq-c14="" _nghost-vnq-c13="" ng-reflect-title="How Are YOu" ng-reflect-picture="assets/images/alan.jpg" class="size-medium shape-round"><div _ngcontent-vnq-c13="" class="user-container"><!--bindings={
  "ng-reflect-ng-if": "SafeValue must use [property]="
}--><div _ngcontent-vnq-c13="" class="user-picture image ng-star-inserted" style="background-image: url(&quot;assets/images/alan.jpg&quot;);"><!--bindings={}--></div><!--bindings={
  "ng-reflect-ng-if": "false"
}--><div _ngcontent-vnq-c13="" class="info-container"><!--bindings={
  "ng-reflect-ng-if": "Anonymous"
}--><div _ngcontent-vnq-c13="" class="user-name ng-star-inserted">Anonymous</div><!--bindings={
  "ng-reflect-ng-if": "How Are YOu"
}--><div _ngcontent-vnq-c13="" class="user-title ng-star-inserted">How Are YOu</div></div></div></nb-user></div><div _ngcontent-vnq-c14="" class="col"><button _ngcontent-vnq-c14="" nbbutton="" status="danger" _nghost-vnq-c15="" ng-reflect-status="danger" class="appearance-filled size-medium status-danger shape-rectangle transitions" aria-disabled="false" tabindex="0">OPEN</button></div><div _ngcontent-vnq-c14="" class="col"> 22/14/1997 </div></div></nb-card-body><div _ngcontent-vnq-c14="" style="flex: 1"><ngx-chat-card _ngcontent-vnq-c14="" _nghost-vnq-c16=""><nb-card _ngcontent-vnq-c16="" _nghost-vnq-c19=""><nb-card-header _ngcontent-vnq-c16=""> Chat Header </nb-card-header><nb-card-body _ngcontent-vnq-c16=""> Chat Message </nb-card-body></nb-card></ngx-chat-card></div></div></div></div></ngx-support-chat></nb-layout-column>

在我的孩子CSS中，我做了：

:host-context(.my-component) {
    padding: 0 !important;
}

我在父级中添加了 my-component 类的父级，即 nb-layout-column ，但仍然无法正常工作。子组件为ngx-support-chat

Answer 1

如果要添加/修改孩子的父组件的css属性。例如，您具有这种结构：

<div class="parent-container">
  <app-child></app-child>
</div>

在ChildComponent CSS中，您想在元素之外的.parent-container类上更改/添加样式。您可以使用主机上下文

ChildComponent（app-child.component.css）

:host-context(.parent-container) {
    ...your styles here
}

添加了Stackblitz Demo供参考

如何从Angular中的子组件修改父组件的css属性

1 个答案: