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

Question

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

我尝试了以下选项 -
1 在子组件中使用ViewEncapsulation.None 然后修改父组件的样式(即 类(class))。但它改变了所有组件的样式。

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>

并且在我的 child css 中我做了:

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

我已将 my-component 类添加到 nb-layout-column 的父类，但它仍然无法正常工作。 子组件是 ngx-support-chat

Answer 1

如果你想添加/修改你 child 的父组件的css属性。例如你有这种结构:

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

在 ChildComponent css 中，您想更改/添加元素外的 .parent-container 类的样式。您可以使用 host-context

来做到这一点

子组件 (app-child.component.css)

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

添加了一个 Stackblitz Demo供大家引用