我有一个父组件:
<parent></parent>
Run Code Online (Sandbox Code Playgroud)
我想用子组件填充这个组:
<parent>
<child></child>
<child></child>
<child></child>
</parent>
Run Code Online (Sandbox Code Playgroud)
父模板:
<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>
Run Code Online (Sandbox Code Playgroud)
儿童模板:
<div class="child">Test</div>
Run Code Online (Sandbox Code Playgroud)
由于parent和child是两个单独的组件,他们的风格被锁定在他们自己的范围.
在我的父组件中,我尝试过:
.parent .child {
// Styles for child
}
Run Code Online (Sandbox Code Playgroud)
但.child样式没有应用于child组件.
我尝试使用styleUrls将parent样式表包含在child组件中以解决范围问题:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
Run Code Online (Sandbox Code Playgroud)
但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.
那么如何设置包含在父组件中的子组件的样式?
我正在尝试将路由器出口放置的元素设置为有角度,并且要确保生成的元素的宽度为100%
从大多数回复中,我看到我应该使用::ng-deep选择器,但是从Angular的文档中它被弃用了.有替代品::ng-deep吗?