[Angular] How to styling ng-content
Let's say you are builing a reuseable component. The style structure like this:
div > input
If you want to style this input field, it can be quite easy, we can just use :host selector:
:host input {
outline: none;
border: none;
}
But one day you figure out that hard cord input into the component might not be a good idea. You want to use content projection 'ng-content' to do that. Now the html stucture boecomes:
div > ng-content
Even you know the ng-content will be the input field. But he will find that your styling no longer works.
This is because Angular style encapsulation. It tries to preserve the style of projection element (because the element is not part of component, it has its own styling, we don't want to break that).
So the way to solve this problem is using CSS '/deep/' selector.
:host /deep/ input {
outline: none;
border: none;
}
'/deep/' break angular style encapsulation. You can think it is a global css styling which can overwrite everything ..:P Sounds pretty prowerful, and a little bit damage, yes! it is.
For example, if you doning like this :
/deep/ input {
outline: none;
border: none;
}
You will find that, all the input fields in your app has been affected!! So to be safe, use with :host selector.
[Angular] How to styling ng-content的更多相关文章
- angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- Angular CLI 启动 版本ng 4
npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- 利用angular打造管理系统页面
1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...
- 使用路由延迟加载 Angular 模块
使用路由延迟加载 Angular 模块 Angular 非常模块化,模块化的一个非常有用的特性就是模块作为延迟加载点.延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源.这样 Angular ...
- Angular07 利用angular打造管理系统页面
1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...
- angular常见问题总结
本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
随机推荐
- 软件project经验总结系列之三 - 计划阶段控制
本文为软件project经验总结系列文章的第三篇.按照总论文章所设立的范围划分,本阶段重点讲述计划阶段的控制过程以及控制思路,笔者所站在的角度是乙方角度来进行表述整个阶段的推动过程,但对于甲方公司其基 ...
- Objective-C基础笔记(8)Foundation常用类NSString
一.创建字符串的方法 void stringCreate(){ //方法1 NSString *str1 = @"A String!"; //方法2 NSString *str2 ...
- codeforces 204E. Little Elephant and Strings(广义后缀自动机,Parent树)
传送门在这里. 大意: 给一堆字符串,询问每个字符串有多少子串在所有字符串中出现K次以上. 解题思路: 这种子串问题一定要见后缀自动机Parent树Dfs序统计出现次数都是套路了吧. 这道题统计子串个 ...
- pytest_多用例执行(1)
一.首先创建测试套件 # -*- coding:utf-8 -*-from __future__ import print_functionimport pytestimport allure cla ...
- 进阶攻略|最全的前端开源JS框架和库
新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响 ...
- 基于Lwip协议栈中独立模式下回调函数的使用
一.使用Lwip协议独立模式开发 最近在STM32F4上边移植了Lwip,Lwip是一个小型开源的TCP/IP协议栈,有无操作系统的支持都可以运行.我当前只测试了TCP Server功能,然后对TCP ...
- CISP/CISA 每日一题 八
CISA 每日一题(答)网关执行电子邮件格式转换 电子邮件安全——加密 大文件——对称加密 不可否认——非对称 哈希——完整性 电子银行主要风险: 战略.经营和声誉上的风险 双SSP每日一题 ...
- 洛谷 P2978 [USACO10JAN]下午茶时间Tea Time
P2978 [USACO10JAN]下午茶时间Tea Time 题目描述 N (1 <= N <= 1000) cows, conveniently numbered 1..N all a ...
- C#里如何把一个DataTable的数据追加进数据库里的某个表
方法一: DataTable table = new DataTable(); //TODO: init table... string connStr = "user id=" ...
- Linux经常使用命令(七) - cp
cp命令用来拷贝文件或者文件夹.是Linux系统中最经常使用的命令之中的一个.普通情况下.shell会设置一个别名.在命令行下拷贝文件时,假设目标文件已经存在.就会询问是否覆盖.无论你是否使用-i參数 ...