Angular学习笔记（二十七）说一说Angular的组件样式

最新推荐文章于 2022-05-05 12:24:06 发布

BAOBAB_cc

最新推荐文章于 2022-05-05 12:24:06 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular学习系列

本文链接：https://blog.youkuaiyun.com/BAOBAB_cc/article/details/79954805

27 篇文章

订阅专栏

本文是Angular组件样式的详细笔记，探讨了组件样式独立性、如何设置宿主标签样式、基于外部组件渲染样式以及如何处理投影内容样式。通过示例展示了:host、:host-context和:host /deep/的用法，并提醒读者注意某些方法已被废弃。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下所有代码的演示地址：
戳这里 => demo展示

组件之间的样式并不互相影响，也就是说，在A组件编写的样式不会渲染到B组件。

app.component.html

@Component({
  selector: 'my-app',
  template: `
    <h1>我是父组件的h1</h1>
    <detail></detail>
  `,
  styles:[`
    h1{ color:red; }
  `]
})

detail.component.html

@Component({
  selector: 'detail',
  template: ['<h1>我是detail组件的h1</h1>']
})

一般情况下，组件@Component的样式是渲染在template上的，那么如果想给宿主标签，即selector标签写上样式，应该怎么写呢？

官方文档给出了答案 —— :host

demo:给detail标签写flex布局样式

@Component({
  selector: 'detail',
  template: `
    <h1>我是detail组件的h1</h1>
  `,
  styles:[`
    :host{
     display:flex;
    }
  `]
})

有的时候，需要基于外部组件来渲染样式，比如：
在外部组件li的class值为active的时候才将组件文字渲染成蓝色。
这个时候，我们就需要 —— :host-context（.xxx）

demo：

:host-context(.active) h1{
      color:blue;
    }

意思就是:当外部组件中类名值为”active”时，其h1的样式渲染为蓝色。

而需要注意的是，以上情况对组件投影内容是无效的！！！

我觉得这算是一个终极用法了吧。虽然目前Angular已经废除了这种写法，但是在项目中为了渲染组件投影内容样式，不得不使用这种写法，因此，在这里也分享一下。

渲染投影内容样式 —— :host /deep/

demo:对<ng-content></ng-content>投影内容进行渲染

:host /deep/ p {
      font-size:18px;
      color:gray;
    }

对于投影内容，不管是ng-content，还是ng-container，都是有效的。不过需要明确的是，这个方法已经被Angular废弃，所以还是尽量少用！