我定义了一个自定义组件:
@Component({
selector: 'preload-image',
template: `<img [src]="imgSrc">`,
styleUrls: []
})
export class ImageWithPreloadComponent implements OnInit {
@Input() src: string;
@Input() srcPreload: string;
...
// codigo omitido para que no sea tan largo
}
我在另一个组件中使用它。
<preload-image class="small-image"
[src]="'https://wsurveyw.blob.core.windows.net/multimedia/profile/ef6c883c-8cd6-48d6-84f4-b4f38b8d9a76.jpg'"
[srcPreload]="'/assets/preload-image/progress.gif'"
[srcError]="'https://cdn.browshot.com/static/images/not-found.png'"></preload-image>
问题是我.small-image
在父组件中定义了一个 css 类,但它没有应用于子组件。我的问题是,是否有任何方法可以将样式从父组件应用到子组件,在许多第三方组件中,它可以毫无问题地执行以下操作:
[style.width]="'100px'"
class="mi-clase-css"
style="width: 100px"
我不明白为什么它不在我的自定义组件中使用。
这种行为基本上与您在子组件中使用的封装模型有关,它是您在装饰器中设置的一个名为
encapsulation
. 目前有 3 种封装类型Emulated
,Native
和None
,第一种Angular
是默认提供的。正如我所说,角度的默认封装是(您从导入
ViewEncapsulation.Emulated
对象),它模拟向每个组件添加随机属性然后指定您在组件中定义的具有相应属性的 css 规则的操作,因此,您在组件中定义的 CSS 规则仅对该组件有效。ViewEncapsulation
@angular/core
ShadowDOM
如果您检查,您
HTML
会看到 Angular 向组件及其子组件添加类和属性,它们看起来像这样:这意味着
CSS
Angular 将为h1
该类生成的规则.title
是这样的:现在,如果你在里面有另一个组件
custom-component
,这个组件将生成它自己的自定义属性,比方说,_nghost-c10
它的子组件将具有属性_ngcontent-c10
而不是_ngcontent-c9
,所以如果你使用 class.title
,该 HTML 元素的选择器将是.title[_ngcontent-c10]
y 因此样式您之前定义的将不起作用。他HTML
看起来像这样:有 3 种替代方法可以解决此问题:
styles.css
在文件夹中定义样式src
。您在那里定义的规则与任何组件都没有关联,因此属性不会添加到它们,它们会影响整个应用程序。:host /deep/
父组件样式表中的选择器来确定您要使用其属性来声明该 css。语法是这样:host /deep/ .title { ... }
的,输出是[_nghost-c9] .title { ... }
.ViewEncapsulation.None
,以便在组件的祖先链中定义的任何样式都会影响子元素的节点(这是最不推荐的)。有关封装策略的更多信息在这里要将样式分配给 Angular 中的子组件,您可以这样做:
这一切都归功于 css3,我建议您查找有关 css3 样式的更多信息,它在应用程序的设计部分对您有很大帮助。