我有一个父组件:
<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',
]
但这并没有帮助，我还尝试了另一种方法，将子样式表取到父样式表中，但这也没有帮助。
那么，如何样式包含在父组件中的子组件呢?
我举一个例子来说明，因为角。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;
}
我希望通过以下方式实现这一目标:
使用@Component将css类添加到宿主元素，并将封装设置为none。然后在组件style.css.scss中引用添加到宿主的类，这将允许我们声明只影响我们自己和我们类范围内的子类的样式。初版
@Component({
selector: 'my-component',
templateUrl: './my-component.page.html',
styleUrls: ['./my-component.page.scss'],
host: {
class: 'my-component-class'
},
encapsulation: ViewEncapsulation.None
})
结合下面的CSS (my-component.page.scss)
// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
// will effect direct h1 nodes within template and all h1 elements within child components of the
h1 {
color: red;
}
}
// without class "scope" will affect all h1 elements globally
h1 {
color: blue;
}
我也有这个问题，不想使用弃用的解决方案
所以我最后得出:
在parrent
<dynamic-table
ContainerCustomStyle='width: 400px;'
>
</dynamic-Table>
子组件
@Input() ContainerCustomStyle: string;
在child In HTML div中
<div class="container mat-elevation-z8"
[style]='GetStyle(ContainerCustomStyle)' >
在代码中
constructor(private sanitizer: DomSanitizer) { }
GetStyle(c) {
if (isNullOrUndefined(c)) { return null; }
return this.sanitizer.bypassSecurityTrustStyle(c);
}
作品像预期的那样，不应该被弃用;)
你不应该使用::ng-deep，它已被弃用。在Angular中，从父组件中改变子组件样式的正确方法是使用封装(阅读下面的警告以了解其含义):
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
然后，你就可以修改组件的css，而不需要使用::ng-deep
.mat-sort-header-container {
display: flex;
justify-content: center;
}
警告:这样做将使您为该组件编写的所有css规则都是全局的。
为了将你的css的范围限制在这个组件和他的子组件上，在你的组件的顶部标签上添加一个css类，并把你的css“放在”这个标签里:
模板:
<div class='my-component'>
<child-component class="first">First</child>
</div>,
Scss文件:
.my-component {
// All your css goes in there in order not to be global
}
截至目前(Angular 9)， Angular使用Shadow DOM将组件显示为自定义HTML元素。为这些自定义元素设置样式的一种优雅方法可能是使用自定义CSS变量。下面是一个通用的例子:
class ChildElement extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode: 'open'});
var wrapper = document.createElement('div');
wrapper.setAttribute('class', 'wrapper');
// Create some CSS to apply to the shadow dom
var style = document.createElement('style');
style.textContent = `
/* Here we define the default value for the variable --background-clr */
:host {
--background-clr: green;
}
.wrapper {
width: 100px;
height: 100px;
background-color: var(--background-clr);
border: 1px solid red;
}
`;
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
// Define the new element
customElements.define('child-element', ChildElement);
/* CSS CODE */
/* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */
child-element {
--background-clr: yellow;
}
<div>
<child-element></child-element>
</div>
从上面的代码中可以看到，我们创建了一个自定义元素，就像Angular为每个组件所做的那样，然后我们从全局作用域覆盖自定义元素阴影根中的背景颜色变量。
在Angular应用中，这可能是这样的:
parent.component.scss
child-element {
--background-clr: yellow;
}
child-element.component.scss
:host {
--background-clr: green;
}
.wrapper {
width: 100px;
height: 100px;
background-color: var(--background-clr);
border: 1px solid red;
}
