[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.问题 -------------- ...
随机推荐
- hdu 3308
终于A了,我好想砍人,虽然这是一道基础的区间合并.但是这错误我也是醉了. 错误我表在注释里. 题目意思不多说,sha崽题目出的很简洁. #include <iostream>#includ ...
- HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
- mysql数据库管理备份运维常用命令
登陆mysql: mysql -u root -p password 远程访问开启((%)表示任何主机连接,可以换固定IP来访问远程连接): GRANT ALL ON *.* TO root@'%' ...
- D题 - A+B for Input-Output Practice (III)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description Your ...
- 转: 静态模式makefile中$(cobjs): $(obj)/%.o: $(src)/%.c
4.12 静态模式静态模式规则是这样一个规则:规则存在多个目标,并且不同的目标可以根据目标文件的名字来自动构造出依赖文件.静态模式规则比多目标规则更通用,它不需要多个目标具有相同的依赖.但是静态模式规 ...
- Javascript 层次
1. HTML5, Tool, Framework ---------------------------UI: Liger UI, jQuery UI, jQuery Mobile -------- ...
- java中String s="abc"及String s=new String("abc")详解
1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直 ...
- 洛谷1001 A+B Problem
洛谷1001 A+B Problem 本题地址:http://www.luogu.org/problem/show?pid=1001 题目描述 输入两个整数a,b,输出它们的和(|a|,|b|< ...
- border粗细不一
devicePixelRatio = 1.5 引发的问题
- winsock 收发广播包
☛广播包的概念 广播包通常为了如下两个原因使用:1 一个应用程序希望在本地网络中找到一个资源,而应用程序对于该资源的地址又没有任何先验的知识. 2 一些重要的功能,例如路由要求把它们的信息发送给所有找 ...