angular学习之路7-组件样式

最新推荐文章于 2023-10-26 15:30:58 发布

你牛什么牛

最新推荐文章于 2023-10-26 15:30:58 发布

阅读量480

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/qq_24401529/article/details/93786795

版权

angular 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1，

特殊的选择器

组件样式中有一些从影子(Shadow) DOM 样式范围领域（记录在W3C的CSS Scoping Module Level 1中）引入的特殊选择器：

:host

使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。

:host {
display: block;
border: 1px solid black;
}

:host 选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它，因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。

要把宿主样式作为条件，就要像函数一样把其它选择器放在 :host 后面的括号中。

下一个例子再次把宿主元素作为目标，但是只有当它同时带有 active CSS 类的时候才会生效，//即此种写法的css只对宿主元素有效，宿主元素即是父组件吗？

:host(.active) {
border-width: 3px;
}

:host-context

有时候，基于某些来自组件视图外部的条件应用样式是很有用的。例如，在文档的 <body> 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，你应当基于它来决定组件的样式。

这时可以使用 :host-context() 伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。

在下面的例子中，只有当某个祖先元素有 CSS 类 theme-light 时，才会把 background-color 样式应用到组件内部的所有 <h2> 元素中。

:host-context(.theme-light) h2 {
background-color: #eef;
}

已废弃 `/deep/`、`>>>` 和 `::ng-deep`

组件样式通常只会作用于组件自身的 HTML 上。

把伪类 ::ng-deep 应用到如何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中，请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用，该样式就会污染其它组件。

这个例子以所有的 <h3> 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素

:host /deep/ h3 {
font-style: italic;
}

deep/ 组合器还有两个别名：>>> 和 ::ng-deep。

CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃，并将这个特性从主流浏览器和工具中移除。因此，我们也将在 Angular 中移除对它们的支持（包括 /deep/、>>> 和 ::ng-deep）。目前，建议先统一使用 ::ng-deep，以便兼容将来的工具。

2，

把样式加载进组件中

有几种方式把样式加入组件：

设置 styles 或 styleUrls 元数据
内联在模板的 HTML 中
通过 CSS 文件导入

当使用 --inline-styles 标识创建组件时，Angular CLI 的 ng generate component 命令就会定义一个空的 styles 数组

ng generate component hero-app --inline-style

你可以通过把外部 CSS 文件添加到 @Component 的 styleUrls 属性中来加载外部样式。

@Component({
selector: 'app-root',
template: `
<h1>Tour of Heroes</h1>
<app-hero-main [hero]="hero"></app-hero-main>
`,
styleUrls: ['./hero-app.component.css']
})
export class HeroAppComponent {
/* . . . */
}

注意：这些样式只对当前组件生效。它们既不会作用于模板中嵌入的任何组件，也不会作用于投影进来的组件（如 ng-content ）。

你可以指定多个样式文件，甚至可以组合使用 style 和 styleUrls 方式。

当你使用 Angular CLI 的 ng generate component 命令但不带 --inline-style 标志时，CLI 会为你创建一个空白的样式表文件，并且在所生成组件的 styleUrls 中引用该文件。

模板内联样式

你也可以直接在组件的 HTML 模板中写 <style> 标签来内嵌 CSS 样式。

@Component({
selector: 'app-hero-controls',
template: `
<style>
button {
background-color: white;
border: 1px solid #777;
}
</style>
<h3>Controls</h3>
<button (click)="activate()">Activate</button>
`
})

模板中的 link 标签

你也可以在组件的 HTML 模板中写 <link> 标签。

@Component({
selector: 'app-hero-team',
template: `

<link rel="stylesheet" href="../assets/hero-team.component.css">
<h3>Team</h3>
<ul>
<li *ngFor="let member of hero.team">
{{member}}
</li>
</ul>`
})

CSS @imports 语法

你还可以利用标准的 CSS @import 规则来把其它 CSS 文件导入到 CSS 文件中。

在这种情况下，URL 是相对于你正在导入的 CSS 文件的。

src/app/hero-details.component.css //在css文件中导入其他css样式文件使用@import

/* The AOT compiler needs the `./` to show that this is local */
@import './hero-details-box.css';

外部以及全局样式文件

当使用 CLI 进行构建时，你必须配置 angular.json 文件，使其包含所有外部资源（包括外部的样式表文件）。

在它的 styles 区注册这些全局样式文件，默认情况下，它会有一个预先配置的全局 styles.css 文件。

你牛什么牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular学习之路7-组件样式

1，特殊的选择器组件样式中有一些从影子(Shadow) DOM 样式范围领域（记录在W3C的CSS Scoping Module Level 1中）引入的特殊选择器：:host使用:host伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。:host { display: block; border: 1px solid black;}:...
复制链接

扫一扫