覆盖封装的 :host-style 外部组件
[英]Overriding the encapsulated :host-style of external component
问题描述
Is it possible to override :host-styling of an external angular2-component?
是否可以覆盖外部 angular2 组件的 :host 样式？
We're making a library including a sidebar-component.我们正在制作一个包含侧边栏组件的库。 This component has a default (fallback) background, but this should be overridable by css/theme used in the app.该组件具有默认（后备）背景，但这应该可以被应用程序中使用的 css/theme 覆盖。
@Component({
selector: 'sidebar',
styles: [`
:host { background-color: green; }
`],
template: `
<h1>sidebar</h1>
<ng-content></ng-content>
`
})
export class SideBarComponent { .... }
Main App css:主应用 css：
<style>
sidebar {background: red; color: yellow; }
</style>
This returns a sidebar with green background and yellow text, but I want a red background...这将返回一个带有绿色背景和黄色文本的侧边栏，但我想要一个红色背景......
3 个解决方案
解决方案1
4 已采纳 2017-01-13 14:10:34
Edited:编辑：
As found on http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/ : add an attribute to the body-tag:如在http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/ 上发现的：添加一个属性身体标签：
<body override>
<app></app>
</body>
And in your css: use a selector for this attribute:在你的 css: 中使用这个属性的选择器：
[override] hello-world h1 {
color:red;
}
This way, your css does not have to be parsed.这样，您的 css 不必被解析。
Previous solution:以前的解决方案：
I've found a solution myself: instead of linking my (theming) css-file in index.html, which isn't parsed, I imported this particular css-file in the app.component.ts annotation.我自己找到了一个解决方案：我没有在未解析的 index.html 中链接我的（主题化）css 文件，而是在 app.component.ts 注释中导入了这个特定的 css 文件。
index.html:索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet/css" type="text/css" href="/assets/style/app.css" />
</head>
<body>
<app></app>
</body>
</html>
app.component.ts: app.component.ts:
import { ... }
@Component({
selector: 'app',
styles: [`
@import "assets/style/theme.css";
`],
template: `
...`,
})
export class AppComponent {...}
theme.css:主题.css：
sidebar {background: red; }
解决方案2
0 2017-01-13 10:48:59
Its not possible to overwrite styles set in a component's styles this way.不可能以这种方式覆盖组件样式中设置的样式。 See point 3 on the "Using Component Styles" section in the Component Styles docs ( https://angular.io/docs/ts/latest/guide/component-styles.html )请参阅组件样式文档 ( https://angular.io/docs/ts/latest/guide/component-styles.html ) 中“使用组件样式”部分的第 3 点
- Our component's styles cannot be changed by changes to styles elsewhere in the application.
Using :host-context is probably a nicer way to acheive this (although i have never tried myself).使用:host-context可能是实现这一点的更好方法（尽管我自己从未尝试过）。
解决方案3
-2 2017-01-13 10:43:34
You should try to check the same with host-context .您应该尝试使用host-context进行检查。 As per documentation host-context works just like the function form of :host() .根据文档， host-context就像:host()的函数形式一样工作。 It looks for a CSS class in any ancestor of the component host element, all the way up to the document root.它在组件宿主元素的任何祖先中查找 CSS 类，一直到文档根。 It's useful when combined with another selector.与另一个选择器结合使用时很有用。
In the following example, we apply a background-color style to all <h2> elements inside the component, only if some ancestor element has the CSS class theme-light .在下面的示例中，我们将background-color样式应用于组件内的所有<h2>元素，前提是某些祖先元素具有 CSS 类theme-light 。
:host-context(.theme-light) h2 {
background-color: #eef;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.