我有一个父组件:
<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 {
// Styles for child
}
但是.child样式没有应用到子组件。
我尝试使用styleUrls将父组件的样式表包含到子组件中，以解决范围问题:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
但这并没有帮助，我还尝试了另一种方法，将子样式表取到父样式表中，但这也没有帮助。
那么，如何样式包含在父组件中的子组件呢?
在Angular中有几个选项可以实现这一点:
1)你可以使用深层css选择器
:host >>> .childrens {
color: red;
}
2)你也可以改变视图封装，它被设置为模拟作为默认值，但可以很容易地改变为本地使用阴影DOM原生浏览器实现，在你的情况下，你只需要禁用它
例如:“
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'parent',
styles: [`
.first {
color:blue;
}
.second {
color:red;
}
`],
template: `
<div>
<child class="first">First</child>
<child class="second">Second</child>
</div>`,
encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
constructor() {
}
}
我发现如果你可以访问子组件代码，传递@INPUT变量会更简洁:
这个想法是，父进程告诉子进程它的外观状态应该是什么，而子进程决定如何显示这个状态。这是一个很好的建筑
SCSS道:
.active {
::ng-deep md-list-item {
background-color: #eee;
}
}
更好的方法:-使用选定的变量:
<md-list>
<a
*ngFor="let convo of conversations"
routerLink="/conversations/{{convo.id}}/messages"
#rla="routerLinkActive"
routerLinkActive="active">
<app-conversation
[selected]="rla.isActive"
[convo]="convo"></app-conversation>
</a>
</md-list>
我举一个例子来说明，因为角。io /指导/组件样式:
阴影穿透的后代组合子已弃用，并已从主要浏览器和工具中移除支持。因此，我们计划在Angular中放弃对/deep/、>>>和::ng-deep的支持。在此之前，::ng-deep应该优先考虑与这些工具的广泛兼容性。
在app.component.scss上，导入您的*。如有需要，可使用SCSS。_colors。SCSS有一些常见的颜色值:
$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;
对所有组件应用规则
所有具有btn-red类的按钮都将被样式化。
@import `./theme/sass/_colors`;
// red background and white text
:host /deep/ button.red-btn {
color: $button_ripple_white_text;
background: $button_ripple_red;
}
将规则应用到单个组件
app-login组件上所有具有btn-red类的按钮都将被样式化。
@import `./theme/sass/_colors`;
/deep/ app-login button.red-btn {
color: $button_ripple_white_text;
background: $button_ripple_red;
}
实际上还有一个选择。这样比较安全。你可以使用ViewEncapsulation。但把你所有的组件样式放到它的标签(又名选择器)。但无论如何，总是喜欢一些全局风格加上封装风格。
下面是Denis Rybalka的例子:
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'parent',
styles: [`
parent {
.first {
color:blue;
}
.second {
color:red;
}
}
`],
template: `
<div>
<child class="first">First</child>
<child class="second">Second</child>
</div>`,
encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
constructor() { }
}
