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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. 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, ...

  4. Angular规范

     只记录一些自己未曾用过,但觉得对以后的项目有帮助的规范 一 Javascript闭包 把Angular组件包装到一个立即调用函数表达式中(IIFE). 为什么?:把变量从全局作用域中删除了,这有助于 ...

  5. Angular（02）-- Angular-CLI命令

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  6. angular 第二种依赖注入

    import { Injectable } from '@angular/core'; import { ProductServiceService, Product } from './produc ...

  7. angular 基本依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...

  8. angular - 小结

    引入样式: 导入全局 - >styles.css 导入第三方 - > 在package.json配置,然后再 npm install 安装好以后,最后再angular.json里面的sty ...

  9. angular cli + primeNG

    目录: 1.安装  angular cli 2.创建项目 3.构建路由 4.新建组件 5.组件之间的通信 6.引入primeNG 7.修改primeNG组件样式 8.问题 -------------- ...

随机推荐

  1. 用连接池提高Servlet访问数据库的效率

    Java Servlet作为首选的服务器端数据处理技术,正在迅速取代CGI脚本.Servlet超越CGI的优势之一在于,不仅多个请求可以共享公用资源,而且还可以在不同用户请求之间保留持续数据.本文介绍 ...

  2. cos-26上传

    在开发中常常需要上传文件,上传文件的方式有很多种,这里有一个cos实现的例子. 首先是要拷贝cos.jar包拷贝到WEB-INF/lib目录下,然后才进行编码. 创建一个可以进行自动重命名的Java文 ...

  3. centos7 开机启动某些程序的方法

    针对svn,nginx每次重启后均要手工启动,好麻烦,所以考虑将其做成开机启动,做成服务好麻烦,考虑像windows 一样,放在某个启动项中完成. 打开启动文件后,发现里面文件内容如下: #!/bin ...

  4. git学习利器：《Git Pro》中文版

    Git书籍有<版本控制之道git>,但是很一般.强烈推荐<Git Pro>中文版! 很多开源软件的教程也是免费开源的在线阅读的. <Git Pro>中文版在线阅读h ...

  5. Linux下定时备份数据库

    linux下使用crontab定时备份MYSQL数据库的方法只需按照下面3步做,一切都在你的掌控之下: 第一步:在服务器上配置备份目录代码: mkdir /var/lib/mysqlbackup cd ...

  6. Cocos2d-x中Vector使用

    1.创建Vector对象 Vector().默认的构造函数. Vector(ssize_t capacity).创建Vector对象,并设置容量. Vector(const Vector<T&g ...

  7. S5PV210开发板刷机（SD卡uboot、串口+USB-OTG刷机方法）

    一.介绍 九鼎的S5PV210开发板,在出厂前已经默认刷了Android4.0系统.如果需要刷其它的系统或者是由于系统问题无法启动时,就需要对板子刷机. 其实,刷机是对210开发板的一个基础学习,目的 ...

  8. spart快速大数据分析学习提纲(一)

    Spart是什么 Spart是一个用来实现快速而而通用的集群计算平台. 在速度方面,Spart扩展了广泛使用的Mapreduce计算模型,而且高效的支持更多的计算模式,包括交互式查询和流处理.Spar ...

  9. Unity3D移植Windows Universal App（Windows 8.1 及Windows Phone 8.1）版本遇到的坑

    移植的情况以及遇到的问题: 1.选用的版本是最新的Unity5.0. 2.全屏播放视频Handheld.PlayFullScreenMoview的路径必须是全路径,并且前面要加上"ms-ap ...

  10. BZOJ 1005 明明的烦恼

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 ...