[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling
If you want to style host component. You can use ':host-context'.
// host @Component({
selector: 'my-app',
template: `
<div class="styled-component">
<hostcontext-styling></hostcontext-styling>
</div>
`,
})
In the host component, we have 'styled-component' class, we want to apply some css to it from the child component:
import { Component } from '@angular/core'; @Component({
selector: 'hostcontext-styling',
template: `
<div>
I'm a div that wants to be styled
</div>
`,
styles: [
`
/* apply a border if any of our ancestors has .styled-component applied */
:host-context(.styled-component) {
border: 1px solid gray;
display:block;
}
`
]
})
export class HostContextStylingComponent {
}
Now if we want to style its child component, we can use '::ng-deep':
import { Component } from '@angular/core'; @Component({
selector: 'hostcontext-styling',
template: `
<div>
I'm a div that wants to be styled
</div>
<child-component></child-component>
`,
styles: [
`
/* apply a border if any of our ancestors has .styled-component applied */
:host-context(.styled-component) {
border: 1px solid gray;
display:block;
} :host ::ng-deep p {
background-color: yellow;
}
`
]
})
export class HostContextStylingComponent {
}
[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling的更多相关文章
- [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案
2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...
- Aplication的意义和生命周期,与Context的关系,以及关于Aplication和Context相关问题的记录和解决办法
Context详解地址链接: http://blog.csdn.net/qinjuning/article/details/7310620 Application是一个应用中有且仅有一个的全局共享变量 ...
- Android深入理解Context(二)Activity和Service的Context创建过程
前言 上一篇文章我们学习了Context关联类和Application Context的创建过程,这一篇我们接着来学习Activity和Service的Context创建过程.需要注意的是,本篇的知识 ...
- 全局获取Context的技巧(再也不要为获取Context而感到烦恼)
1.Context概念 Context,相信不管是第一天开发Android,还是开发Android的各种老鸟,对于Context的使用一定不陌生~~你在加载资源.启动一个新的Activity.获取系统 ...
- java.lang.IllegalStateException: Cannot initialize context because there is already a root application context present
@Controller@ComponentScan@Configuration@EnableScheduling@EnableAutoConfiguration(exclude={DataSource ...
- 前端JS基础知识
1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...
- Underscore.js(1.9.1) 封装库
// Underscore.js 1.9.1// http://underscorejs.org// (c) 2009-2018 Jeremy Ashkenas, DocumentCloud and ...
- Istio多集群(1)-多控制面
Istio多集群(1)-多控制面 参考自官方文档. 目录 Istio多集群(1)-多控制面 复制控制面 要求 在每个集群中部署Istio控制面 配置DNS 配置应用服务 配置用例服务 卸载 FAQ 复 ...
- 如何在JavaScript中正确引用某个方法(bind方法的应用)
在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...
随机推荐
- vim基础学习之EX命令
:tabnew -创建新标签 :split(sp)-垂直分割窗口 如果没有打开新的文件,那么会打开原来窗口的文件 :vsplit(vsp)-水平分割窗口 如果没有打开新的文件,那么会打开原来窗口的文件 ...
- 通过视频展示如何通过Samba配置PDC
通过视频展示如何通过Samba配置PDC(Linux企业应用案例精解补充视频内容) 本文通过视频,真实地再现了在Linux平台下如何通过配置smb.conf文件而实现Samba Server模拟win ...
- OpenSUSE42.3 leap 软件源设置
一.OpenSUSE软件源介绍: 1.默认已经加入了官方的软件源,不过我们自己也可以根据需要添加很多非官方软件源,添加软件源时要注意: 非官方源可能包含一些试验中的不稳定的软件包 不同的软件源之 ...
- JSP中 input type 用法
JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=te ...
- Nginx缩略图和Fastdfs整合以及image_filter配置,7点经验结论和5个参考资料
以下是7点经验结论和5个参考资料 1.Nginx单独配置缩略图与Nginx和Fastdfs模块整合,配置是不一样的. 非整合模式的配置,类似这样的: location ~* /(\d+)\.(jpg ...
- HDU 5281 Senior's Gun 杀怪
题意:给出n把枪和m个怪.每把枪有一个攻击力,每一个怪有一个防御力.假设某把枪的攻击力不小于某个怪的防御力则能将怪秒杀,否则无法杀死.一把枪最多仅仅能杀一个怪,不能用多把枪杀同一个怪.每杀一次怪能够得 ...
- 时间格式化函数strftime
#include <time.h> #include <stdio.h> #include <string.h> int main() { char ti ...
- HDU1788 Chinese remainder theorem again【中国剩余定理】
题目链接: pid=1788">http://acm.hdu.edu.cn/showproblem.php?pid=1788 题目大意: 题眼下边的描写叙述是多余的... 一个正整N除 ...
- HDU1796 How many integers can you find【容斥定理】
题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=1796 题目大意: 给你一个整数N.和M个整数的集合{A1.A2.-.Am}.集合内元素为非负数(包 ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...