我在创建我的第一个 Angular2
应用程序时遇到了一个奇怪的问题。
我正在将一些 CSS 应用于组件宿主(example-component
),但它没有出现在浏览器中?
这是我第一次在 SO 中为 Angular 发帖,所以希望我包含了获得一些帮助所需的一切。
example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'crate',
templateUrl: './app/folderA/folderAB/crate.html',
styleUrls: ['./app/folderA/folderAB/crate.css']
})
export class MyComponent {}
index.html
crate.html
<div class="background">
<div class="content">
<p>Content</p>
</div>
</div>
crate.css
:host-context(.lg){
width: 100%;
background-color: #000;
border-radius: 25px;
}
我不明白的是,我在 chrome 和 firefox 中打开它,我看到以下 CSS 在
example.component
的规则下陈述。
.lg[_nghost-ims-2], .lg [_nghost-ims-2] {
width: 100%;
background-color: #000;
border-radius: 25px;
}
它正确地将 CSS 应用于 example-component
,但它没有在浏览器中显示/呈现。我做错了什么/错过了什么?
编辑
即使我将 crate.css
更改为:
crate{
width: 100%;
background-color: #000;
border-radius: 25px;
}
最佳答案
任何具有无法识别的标签名称的组件,如 <crate></crate>
创建为 HTMLUnknownElement如果您希望它表现得像 div
,所有样式属性都为空值然后添加 display: block;
到您的样式表。
参见 Browsers' default CSS for HTML elements有关不同浏览器的默认 css 的其他资源。
关于css - Angular2 CSS :host applying but not visible in browser,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40067117/