当前位置: 首页 > 面试题库 >

如何从父组件的CSS文件设置子组件的样式?

秦昊穹
2023-03-14
问题内容

我有一个父组件:

<parent></parent>

我想用子组件填充该组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

子模板:

<div class="child">Test</div>

由于parentchild是两个独立的组件,因此它们的样式被锁定在自己的范围内。

在父组件中,我尝试执行以下操作:

.parent .child {
  // Styles for child
}

但是.child样式没有被应用到child组件。

我尝试使用styleUrlsparent的样式表包含到child组件中来解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这无济于事,还尝试了另一种方法,即将child样式表提取到其中,parent但这也无济于事。

那么,如何设置父组件中包含的子组件的样式?


问题答案:

更新-最新方式

如果可以避免,请不要这样做。正如Devon Sans在评论中指出的那样:该功能很可能已被弃用。

更新-较新的方式

Angular 4.3.0开始 ,不推荐使用所有可穿透的CSS组合器。Angular团队推出了一种新的组合器 ::ng-deep
(仍然处于实验水平,而不是完整的最终方法)
,如下所示,

styles: [
    `
     :host { color: red; }

     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

旧方法

您可以使用encapsulation mode和/或piercing CSS combinators >>>, /deep/ and::shadow

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`


 类似资料:
  • 我已经看到了一些解决这个问题的繁重解决方案,在React中使用ref或事件处理程序。我想知道样式化组件中是否有解决方案。 下面的代码显然不正确。当输入子组件具有焦点时,我正在尝试找出设置父组件样式的最简单方法。这是否可以使用样式化组件? 实现这一点的最佳方法是什么,特别是考虑到样式化组件,即使这意味着依赖上面提到的React方法之一?

  • 我有一个在父组件中生成的事件,子组件必须对此作出反应。我知道在中不建议使用这种方法,我必须执行emit,这非常糟糕。所以我的代码是这个。 正如您所看到的,在无限滚动上被触发,事件被发送到子组件搜索。不仅仅是搜索,因为它是根,所以它正在向每个人广播。 什么是更好的方法。我知道我应该使用道具,但我不知道在这种情况下我该怎么做。

  • 如何设置父组件的状态从子组件内部的反应?子组件只是一个我想设置组件状态的函数。

  • 我是新来的反应,我有一个问题,也许很简单,但我还无法弄清楚。 我有一个调用const组件子组件的const组件父组件,我想要的是将值从父组件传递给子组件,如果值在子组件中被编辑,父组件可以访问编辑后的值。 我想要的是这个,下面的const组件是子组件,它只是渲染一个地图,如果您单击它设置const selectedPotionwith经度和纬度,我希望const组件父组件传递经度和纬度的初始值,每

  • 我有两个组件:父组件,我想改变子组件的状态: 和子组件: 我需要从父组件更改子组件的打开状态,或者当单击父组件中的按钮时,从父组件调用子组件的toggleMenu()?

  • 假设我的父组件有两个子组件: 我从Child2获得一个输入,并将其传递给父组件(到目前为止,我知道该怎么做)。但是,我需要将该输入传递给Child1,以更新它的状态。 我怎么能那么做?