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. VIM快捷键(转)

    VIM快捷键:光标移动:四个方向   kh 0 l   j  ctrl+f, ctrl+b                 向下翻页,向上翻页  ctrl+d, ctrl+u              ...

  2. 关于DEDECMS目录移动方法

    最近在做一个美容医院的站,由于我的本地的PHP服务器上有几个站,又不能放在根目录下,只能在根目录下新建一个目录来存放这个站,于是就有了这篇文章. 如果我们直接将根目录下的A文件夹下的DEDECMS文件 ...

  3. 使用OpenSSL API进行安全编程

    http://www.ibm.com/developerworks/cn/linux/l-openssl.html OpenSSL API 的文档有些含糊不清.因为还没有多少关于 OpenSSL 使用 ...

  4. BTREE与其它索引的优缺点对比

    数据库BTree索引.Hash索引.Bitmap位图索引的优缺点 (2016-01-05 17:13:40) 转载▼ 标签: 数据库 索引 mysql oracle 分类: IT http://www ...

  5. 转:Github上最受关注的前端大牛，快来膜拜吧！

    原文来自于:http://code.csdn.net/news/2820990 本文列出了Github上最受关注的10位前端大牛.看看他们负责的项目和提交的代码,你是不是能从中学到些什么? 1. Pa ...

  6. SharePoint 2010 产品六大功能模块

    对IT专业人员来说,新的产品,意味着新的功能,IT生产力提高的契机,更加关心如何使用新产品投入更少,产出更多.在本文中我们通过对SharePoint 2010产品的功能介绍.管理中心新功能介绍.系统新 ...

  7. Unity3d Material(材质) 无缝拼接

    Unity3d Material(材质) Edit by @灰太龙 在做一个项目的过程中,遇到动态切换壁纸的功能,问题点在无缝拼接! 那我们先查查Unity3d 中的材质球,里面有个参数 Tiling ...

  8. Iphone6 LightBlue测试BT4GMD-Q25P透传模块

    安装LightBlue后,连接透传模块之后,显示如下: 注意:0xFF01是写通道,0xFF02是读通道 BLE透传模块与PL2303相连,在PC端用串口调试助手显示数据. 一.lightblue向B ...

  9. C Static Inline函数

    Inline函数 程序执行时,处理器从Memory中读取代码执行.当程序中调用一个函数时,程序跳到存储器中保存函数的位置开始读取代码执行,执行完后再返回. 为了提高速度,C定义了inline函数,告诉 ...

  10. 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题

    http://support.huawei.com/ecommunity/bbs/10178271.html?p=1#p0 华为5700交换机通过外部开源protal和本地aaa用户认证的一些问题 各 ...