[Angular 2] Controlling how Styles are Shared with View Encapsulation
Angular with View How are shared styles
2023-09-14 09:00:54 时间
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
相关文章
- node、npm 、package.json、Angular Cli、webpack之间的关系(Windows环境下)
- Angular: 最佳实践
- Angular 结合 dygraphs 实现 annotation
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- angular面试问题_kafka面试题
- 关于 Angular 部署以及 index.html 里 base hRef 属性的关联关系
- 关于 Angular 应用的入口
- 干货 | 一文搞懂在AlmaLinux上安装Angular JavaScript框架
- 关于 Angular 应用对浏览器 Back 按钮支持问题的讨论
- 一款开源的 Angular Storefront 应用介绍,代号 Spartacus 诞生的历史背景
- 关于 Angular 应用的 Bootstrap 过程
- 关于 Angular 编程中的 shim 概念
- 关于 Angular 应用部署时的 base-href 参数
- Angular与React、Vue.js的对比
- 语句掌握Oracle中用WITH语句的利用技巧(oracle的with)
- 语句使用Oracle两个WITH语句实现数据查询(oracle两个with)