如何在Angular 5中从父组件继承子组件中的css样式

Posted 2023-03-05

【中文标题】如何在Angular 5中从父组件继承子组件中的css样式

【英文标题】：How to inherit css styles in child component from parent in Angular 5

【发布时间】：2018-09-06 01:07:13

【问题描述】：

我有一个父组件，里面有一个子组件。父组件有一些 css 类，子组件在其中扩展它们。我尝试使用 :host 查看文档，但似乎无法正常工作。

子组件：

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

父组件：

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                  </div>
            <app-child-component></app-child-component>
                </div>

父组件css：

  :host  .table 
    display: table;
  

  :host .table-row 
    display: table-row;
  

  :host .table-cell 
    display: table-cell;
  

  :host .container 
   width: 400px;
   height: 100vh;
  

  :host  .header 
    background: cyan;
 

   :host .body 
    background: yellow;
    height: 100%;
 

  :host .body-content-outer-wrapper 
    height: 100%;
 

 .body-content-inner-wrapper 
    height: 100%;
   position: relative;
   overflow: auto;


 .body-content 
    position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;

即使我将 css 类放在子组件中，布局也会因为有子组件模板而中断。那么主要的问题是子组件从父组件继承扩展 css 的正确方法是什么？

【参考方案1】：

为什么要把事情复杂化？

理想的做法是在子组件中添加父 css 文件的引用。

 @Component(
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
)
export class ChildComponent  

【讨论】：

我的错，还是谢谢，刚刚发现没有父子架构，而是2个兄弟组件。在这种情况下，最好的方法是什么？我应该将课程移动到全局 css 吗？

如果两个兄弟姐妹都有任何父母，您可以按照我的回答中的建议进行操作，否则您可以拥有一个共享的 css 文件并在两个组件的“StyleUrls”下添加共享 css 的引用。

如果我这样做，那么每个组件都是不同的范围，并且样式不会被继承。

您是否在 AngularJS 中工作，对于 Angular2+。没有范围限制，您可以共享组件，只需添加对 StyleUrls 的引用即可在多个组件之间共享 css。

Angular 2+，问题是 css 中断，因为类似 >> 。班级表行在那里，但它破坏了应用程序。只有当我将类移动到实际的 选择器时它才有效。但我不需要那样的。

【参考方案2】：

使用::ng-deep，样式将应用于当前组件，但也会向下渗透到组件树中当前组件的子组件。

例子：

:host ::ng-deep app-child-component 
       color:yellow;
     

一个很好的资源 - Styles Between Components in Angular 2+

【讨论】：

ng-deep 已弃用：angular.io/guide/component-styles

这样做的新方法是什么？还是不再支持了？

【参考方案3】：

另一种替代 ::ng-deep 并引用父 css 文件的方法是使用 encapsulation 组件属性：

import  Component, ViewEncapsulation  from '@angular/core';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
)

父级 css 流向所有子级。

【讨论】：

但它也会流向应用程序的其余部分。就像将 login.component.css 放在全局样式中一样。此外，它使这些组件容易损坏其他组件。

@SoEzPz 这不是真的，我刚刚测试过，我可以清楚地在任何父级的子组件的 scss 中应用一个类声明。 ViewEncapsulation.None 使这些样式全局化。