[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.问题 -------------- ...
随机推荐
- C#DataTable操作
] 在DataSet中添加DataTable DataSet.Tables.Add(DataTable) 实例: DataSet ds=new DataSet(); DataTable table=n ...
- extjs中gridpanel动态显示/隐藏列
在extjs3中,大家知道用 myGrid.getColumnModel().setHidden(i,true);但到了4.0后,已经没有getColumnModel这个方法了,我们在Ext.pane ...
- jQuery常用技巧大放送
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- js 判断时间，满足执行框架
// 8点到早上19点关var curr = new Date();var time = curr.getHours(); if ( time >=0 && time <2 ...
- VS2010与VAssistX
http://www.cnblogs.com/9tian/archive/2011/07/01/2095202.html 最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为 ...
- Spark的RDD编程(二)公众号undefined110
创建RDD有两种方式:①读取外部数据集,lines=sc.textFile("README.md").②对一个集合进行并行化,lines=sc.parallelize([" ...
- bzoj1311: 最优压缩
Description 其中: Auv是与Aij相邻的像素(为了简化,认为(i-1,j),(i+1,j,(i,j-1),(i,j+1)为相邻元素); Wij取值0或者1,表示Aij修改后取V0或者V ...
- SetTimer and CreateWaitableTimer的例子（静态函数设置为回调函数，瑞士的网页，有点意思）
Timers (SetTimer and CreateWaitableTimer) in Windows SetTimer The following example creates a time ...
- MySQL使用rand函数实现随机数
sql 的随机函数newID()和RAND() sql server的随机函数newID()和RAND() SELECT * FROM Northwind..Orders ORDER BY NEWID ...
- cscope使用
[[]][]再加上][一共是 4 个在段落(对于 C 来讲就是函数)间跳转的命令. 总结是:1,相同就跳到函数的开头:(如果都是左括号或者都是右括号),不同就跳到函数的结尾: { 和 } 用来 ...