[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 {
}
时间: 2024-10-13 08:00:14

[Angular] Use :host-context and the ::ng-deep selector to apply context-based styling的相关文章

(十七)Android获取其他包的Context和在任意位置获取应用程序Context(转载http://blog.sina.com.cn/s/blog_46726d240100usn9.html)

1.在任意位置获取应用程序Context Android程序中访问资源时需要提供Context,一般来说只有在各种component中(Activity, Provider等等)才能方便的使用api来获取Context;喜欢编程的人都知道,编写工具类可以有效的实现代码复用,而在Android下某些工具类的编写很让人困惑,例如:我们要在工具类中获取SharedPreferences,那就需要Context的支持. 为了解决这写由Context带来的麻烦,我们可以自定义一个Application类来

org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener at 这个错有可能是发生在你maven项目update以后 你会发现你的maven依赖没导入进来 所以右键项目  属性-->Deployment Assembly-->add-->maven dependen

【jQuery源码】工具函数

1 //扩展工具函数 2 jQuery.extend({ 3 // Unique for each copy of jQuery on the page 4 expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), 5 6 // Assume jQuery is ready without the ready module 7 isReady: true, 8 9 error: fun

中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)

引言 当下,正面临着近几年来的最严重的互联网寒冬,听得最多的一句话便是:相见于江湖~??.缩减HC.裁员不绝于耳,大家都是人心惶惶,年前如此,年后想必肯定又是一场更为惨烈的江湖厮杀.但博主始终相信,寒冬之中,人才更是尤为珍贵.只要有过硬的操作和装备,在逆风局下,同样也能来一波收割翻盘. 博主也是年前经历了一番厮杀,最终拿到多家大厂的 offer.在闭关修炼的过程中,自己整理出了一套面试秘籍供自己反复研究,后来给了多位有需要的兄台,均表示相当靠谱,理应在这寒冬之中回报于社会.于是决定花点精力整理成

javascript函数节流(throttle)与函数去抖(debounce)

throttle 等时间 间隔执行函数. debounce 时间间隔 t 内若再次触发事件,则重新计时,直到停止时间大于或等于 t 才执行函数. 1.throttle函数的简单实现 function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, timer; return function () { var context = scope || this; var now = +new

js函数绑定同时,如何保留代码执行环境?

经常写js的程序员一定不会对下面这段代码感到陌生. 1 var EventUtil = { 2 3 addHandler : function(element, type, handler){ 4 if(element.addEventListener){ 5 element.addEventListener(type, handler, false); 6 }else if(element.attachEvent){ 7 element.attachEvent("on"+type,h

jQuery源码学习:Deferred Object

本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一.Deferred Object 1. 简介和创建 详见API:http://api.jquery.com/jQuery.Deferred/.jQuery Deferred是"based onCommonJS Promises/A design",并不完全等同于ES6的Promise,或者浏览器/JS引擎实现的原生Promise,或是各类Promise库. jQuery.Deferred()工厂

mybatis forEach标签item影响其他标签判断的问题

mapper.xml文件中,多个标签中存在属性中使用同名变量,若前边的标签修改了变量的值,则前边的标签可能会影响后边的标签(一般是forEache标签影响后边标签),示例: 1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org

菜鸟学习cordova-android的js源码(2)

刚刚数了一下,cordova.js中定义了17个模块,下面慢慢来看这17个模块. 先看比较独立的模块,一些工具模块. 1. cordova/urlutil 模块输出的对象包含一个方法makeAbsolute,把地址转化为绝对地址. //markdefine("cordova/urlutil", function(require, exports, module) { exports.makeAbsolute = function makeAbsolute(url) { var anch