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. 人人网FED CSS编码前端开发规范

    文件相关规范 1.文件名必须由小写字母.数字.中划线-组成 2.文件必须用utf-8编码 3.文件引入可通过外联或内联方式引入: 3.1 外联方式:<link rel=”stylesheet” ...

  2. phalapi

    public为程序入口 Demo和MyApp为具体的实现 public为多入口 demo和myapp都是入口,但是进入后即又为单入口 list为接口文档,是自动解析程序里的注释自动生成的文档 框架执行 ...

  3. Following Orders

    uva124:http://uva.onlinejudge.org/index.php?option=onlinejudge&page=show_problem&problem=60题 ...

  4. GCD - Extreme (II)

    uva11424: 题目:给出n,求gcd(1,2)+gcd(1,3)+gcd(2,3)+gcd(1,4)+gcd(2,4)+gcd(3,4)+...+gcd(1,n)+gcd(2,n)+...+gc ...

  5. VC版本的MakeObjectInstance把WNDPROC映射到类的成员函数

    这段时间用VC封装Windows类库,没有MakeObjectInstance处理窗口消息确实不爽,又不想使用MFC的消息映射,这玩意的效率和美观只能呵呵. 至于MakeObjectInstance是 ...

  6. Android Wear开发 - 入门指引 - Eclipse开发平台搭建

    开发平台配置 下载最新版本的ADT,详情见官网:http://developer.android.com/sdk/installing/installing-adt.html .(之前一直习惯于Goo ...

  7. 【HDOJ】1987 Decoding

    简单搜索. /* hdoj 1987 */ #include <iostream> #include <cstdio> #include <cstring> #in ...

  8. Balance(01背包)

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 9163   Accepted: 5617 Description Gigel ...

  9. Linux kernel ‘ip6_sk_dst_check’函数拒绝服务漏洞

    漏洞名称: Linux kernel ‘ip6_sk_dst_check’函数拒绝服务漏洞 CNNVD编号: CNNVD-201307-070 发布时间: 2013-07-05 更新时间: 2013- ...

  10. 「Poetize7」电话线路

    描述 每台电话都有一个独一无二的号码,用一个十位的十进制数字串表示.电话a和b之间能直接通信,当且仅当“a与b之间仅有一个数字不同”,或者“交换a的某 两位上的数字后,a与b相同”.而a.b之间建立通 ...