[Angular 2] Controlling how Styles are Shared with View Encapsulation
Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and None) compare to each other.
<html>
<head>
<title>Angular 2 QuickStart</title>
<style>
.started{
background-color: #0b97c4;
}
.completed{
background-color: #80d8ff;
}
</style>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('app/app');
</script>
</head>
<div class="started">Started</div>
<div class="completed">Completed</div>
<body>
<app>Loading...</app>
</body>
</html>
import {Input, Component, View, NgClass, ViewEncapsulation} from "angular2/angular2";
import {TodoModel} from './todoService';
@Component({
selector: 'todo-item-render'
})
@View({
encapsulation: ViewEncapsulation.Emulated, // default state: the global style will have an affect on compoment style
directives: [NgClass],
styles: [`
.${TodoModel.STARTED}{
color: green;
}
.${TodoModel.COMPLETED}{
text-decoration: line-through;
}
`],
template: `
<div>
<span [ng-class]="todoinput.status">{{todoinput.title}}</span>
<button (click)="todoinput.toggle()">Toggle</button>
</div>
`
})
export class TodoItemRender{
@Input() todoinput: TodoModel;
}
if we switch to Native:
encapsulation: ViewEncapsulation.Native, // Use shadow down, which mean the global style will not affect the compoment sytle
last, we switch to None:
encapsulation: ViewEncapsulation.None, // the component style and global style are the same, affect each other
[Angular 2] Controlling how Styles are Shared with View Encapsulation的更多相关文章
- [Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects
Each time you use the Async Pipe, you create a new subscription to the stream in the template. This ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
- ANGULAR 2 FOR REACT DEVELOPERS
Now that Angular 2 is in beta, the time has come for us to drop everything and learn something new, ...
- Angular规范
只记录一些自己未曾用过,但觉得对以后的项目有帮助的规范 一 Javascript闭包 把Angular组件包装到一个立即调用函数表达式中(IIFE). 为什么?:把变量从全局作用域中删除了,这有助于 ...
- Angular（02）-- Angular-CLI命令
声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...
- angular 第二种依赖注入
import { Injectable } from '@angular/core'; import { ProductServiceService, Product } from './produc ...
- angular 基本依赖注入
import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...
- angular - 小结
引入样式: 导入全局 - >styles.css 导入第三方 - > 在package.json配置,然后再 npm install 安装好以后,最后再angular.json里面的sty ...
- angular cli + primeNG
目录: 1.安装 angular cli 2.创建项目 3.构建路由 4.新建组件 5.组件之间的通信 6.引入primeNG 7.修改primeNG组件样式 8.问题 -------------- ...
随机推荐
- 简单概述 .NET Framework 各版本区别
目前已发行的版本有1.0.1.1.2.0.3.0.3.5.4.0.4.5(及4.5.1.4.5.2).4.6(及4.6.1). 1.0版本:最初的.net framework版本,作为一个独立的工具包 ...
- 使用Raphael 画图(一) 基本图形 (javascript)
Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...
- 访问Github过慢解决
在这个地址查找响应最快的地址:http://tool.chinaz.com/dns?type=1&host=assets-cdn.github.com&ip= 查找:assets-cd ...
- C# 正则表达式、Json
正则表达式: 正则表达式主要的参考文章:http://www.cnblogs.com/stg609/archive/2009/06/03/1492709.html#anchorD. 需求:将cocos ...
- awk里的各种坑
今天又遇到一个,一旦需要定义一个局部数组(awk通过把局部变量定义在函数参数列表来实现局部这一特征)那么这个数组可以正常的操作,但是无法对他取长度,一旦使用length(tempArr)会得到这么一个 ...
- CMD模块定义规范
CMD 模块定义规范 在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规 ...
- iOS cell自动换行
// // DynamicHeightsViewController.h // DynamicHeights // // Created by Matt Long on 9/22/09. // ...
- Nodejs爬虫进阶教程之异步并发控制
Nodejs爬虫进阶教程之异步并发控制 之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回 ...
- GNU工具链学习笔记
GNU工具链学习笔记 1..so为动态链接库,.a为静态连接库.他们在Linux下按照ELF格式存储.ELF有四种文件类型.可重定位文件(Relocatable file,*.o,*.a),包含代码和 ...
- POJ-3693-Maximum repetition substring(后缀数组-重复次数最多的连续重复子串)
题意: 给出一个串,求重复次数最多的连续重复子串 分析: 比较容易理解的部分就是枚举长度为L,然后看长度为L的字符串最多连续出现几次. 既然长度为L的串重复出现,那么str[0],str[l],str ...