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的更多相关文章

  1. [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案

    2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...

  2. Aplication的意义和生命周期,与Context的关系,以及关于Aplication和Context相关问题的记录和解决办法

    Context详解地址链接: http://blog.csdn.net/qinjuning/article/details/7310620 Application是一个应用中有且仅有一个的全局共享变量 ...

  3. Android深入理解Context(二)Activity和Service的Context创建过程

    前言 上一篇文章我们学习了Context关联类和Application Context的创建过程,这一篇我们接着来学习Activity和Service的Context创建过程.需要注意的是,本篇的知识 ...

  4. 全局获取Context的技巧(再也不要为获取Context而感到烦恼)

    1.Context概念 Context,相信不管是第一天开发Android,还是开发Android的各种老鸟,对于Context的使用一定不陌生~~你在加载资源.启动一个新的Activity.获取系统 ...

  5. java.lang.IllegalStateException: Cannot initialize context because there is already a root application context present

    @Controller@ComponentScan@Configuration@EnableScheduling@EnableAutoConfiguration(exclude={DataSource ...

  6. 前端JS基础知识

    1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...

  7. Underscore.js(1.9.1) 封装库

    // Underscore.js 1.9.1// http://underscorejs.org// (c) 2009-2018 Jeremy Ashkenas, DocumentCloud and ...

  8. Istio多集群(1)-多控制面

    Istio多集群(1)-多控制面 参考自官方文档. 目录 Istio多集群(1)-多控制面 复制控制面 要求 在每个集群中部署Istio控制面 配置DNS 配置应用服务 配置用例服务 卸载 FAQ 复 ...

  9. 如何在JavaScript中正确引用某个方法(bind方法的应用)

    在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...

随机推荐

  1. Web 端 js 导出csv文件

    http://www.qdfuns.com/notes/35821/2ab249182734d1f5c66da6b5cf395db9.html

  2. 今日SGU 5.15

    最近事情好多,数据库作业,没天要学2个小时java,所以更新的sgu就比较少了 SGU 131 题意:给你两种小块一种,1*1,一种2*2-1*1,问你填满一个m*n的矩形有多少钟方法,n和m小于等于 ...

  3. 阿里云server改动MySQL初始password---Linux学习笔记

    主要方法就是改动 MySQL依照文件以下的my.cnf文件 首先是找到my.cnf文件. # find / -name "my.cnf" # cd /etc 接下来最好是先备份my ...

  4. (诡异Floyd&amp;自环)MZ Training 2014 #15 E题(POJ 2240)

    你们见过这么诡异的FLOYD吗? 先上题. [Description] 货币的汇率存在差异.比如,如果1美元购买0.5英镑,1英镑买10法郎.而1法国法郎买0.21美元.然后,通过转换货币,一个聪明的 ...

  5. [c++]基类对象作为函数參数(赋值兼容规则)

    编程处理教师的基本情况. 要求: 1.定义一个"person"类.用来存储及处理人的姓名.性别.年龄,成员函数自定: 2.定义"teacher"类,公有继承&q ...

  6. POJ 1328 Radar Installation 贪心题解

    本题是贪心法题解.只是须要自己观察出规律.这就不easy了,非常easy出错. 一般网上做法是找区间的方法. 这里给出一个独特的方法: 1 依照x轴大小排序 2 从最左边的点循环.首先找到最小x轴的圆 ...

  7. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

  8. Android自定义组件系列【13】——Android自定义对话框如此简单

    在我们的日常项目中很多地方会用到对话框,但是Android系统为我们提供的对话框样子和我们精心设计的界面很不协调,在这种情况下我们想很自由的定义对话框,或者有的时候我们的对话框是一个图片,没有标题和按 ...

  9. Deep Networks : Overview

    Overview In the previous sections, you constructed a 3-layer neural network comprising an input, hid ...

  10. Gym 100952 H. Special Palindrome

    http://codeforces.com/gym/100952/problem/H H. Special Palindrome time limit per test 1 second memory ...