[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.问题 -------------- ...
随机推荐
- cos-26上传
在开发中常常需要上传文件,上传文件的方式有很多种,这里有一个cos实现的例子. 首先是要拷贝cos.jar包拷贝到WEB-INF/lib目录下,然后才进行编码. 创建一个可以进行自动重命名的Java文 ...
- Spring(一)简述（转载）
原文出自:http://www.cnblogs.com/liunanjava/p/4396794.html 一.Spring简述 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量 ...
- jQuery height()、innerHeight()、outerHeight()函数的区别
参考: http://www.365mini.com/tech 函数 高度范围 jQuery版本 支持写操作 height() height 1.0+ 1.0+ innerHeight() heigh ...
- Code::Blocks 的配色方案
codeblocks的配置文件是default.conf, 在Windows系统下,该文件在C:\Documents and Settings\Administrator\Application Da ...
- phpcms栏目调用
{loop subcat(0,0,0,$siteid) $r} {php $num++} <h3><a href="{$r[url]}">{$r[catna ...
- 关于DEDECMS自定义模型当中添加自定义字段后在后台添加内容后不显示解决方案
用DEDECMS的时间也不长,最近在做一个站时,就遇到了这个问题(自定义字段在后台不显示内容)中添加自定义字段后在后台编辑打开后发现我之前添加的内容不显示,如果是只是看看不单击确定的话,那么在前台数据 ...
- hdu 5072 Coprime
http://acm.hdu.edu.cn/showproblem.php?pid=5072 题意:给出 n 个互不相同的数,求满足以下条件的三元无序组的个数:要么两两互质要么两两不互质. 思路:根据 ...
- Struts2的注解功能
我们知道通常情况下,Struts2是通过struts.xml配置的.但是随着系统规模的加大我们需要配置的文件会比较大,虽然我们可以根据不同的系统功能将不同模块的配置文件单独书写,然后通过<inc ...
- java根据本地Ip获取mac地址
import java.net.InetAddress; import java.net.NetworkInterface; import java.net.SocketException; impo ...
- VS2010中fatal error LNK1123错误的解决方案
问题描述: 在VS2010项目编译时会出现如下错误:LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 解决方案: 查找是否有两个cvtres.exe ...