我有一个父组件:
<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>
由于parent
和child
是两个独立的组件,因此它们的样式被锁定在自己的范围内。
在父组件中,我尝试执行以下操作:
.parent .child {
// Styles for child
}
但是.child
样式没有被应用到child
组件。
我尝试使用styleUrls
将parent
的样式表包含到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,以更新它的状态。 我怎么能那么做?