您的位置：首页 > Web前端 > CSS

Angular2组件开发—为模板应用样式（三）

2015-12-15 13:56 621 查看

设置ShadowDom策略

在Angular2中，ShadowDom的三种策略对应于三个类，这三个类继承自ShadowDomStrategy：

Angular2的内核引用的是父类ShadowDomStrategy，我们只需要从三个继承类中选择一个与之绑定就可以实现不同策略的选择。下面的示例意味着选择NativeShadowDomStrategy：

bind(ShadowDomStrategy).toFactory(function(doc){
return new NativeShadowDomStrategy(doc.head);
},[DOCUMENT_TOKEN])

上面的表达式用来提交给Angular2的注入器/DI，可以理解为：如果注入器需要实例化一个ShadowDomStrategy 实例，应当以DOCUMENT_TOKEN为参数，调用一个匿名的工厂函数，而这个工厂函数将返回一个 NativeShadowDomStrategy类的实例。

ES6支持lambda表达式，因此我们可以写的简单一些：

bind(ShadowDomStrategy).toFactory(doc => new NativeShadowDomStrategy(doc.head),[DOCUMENT_TOKEN])

补丁包

在Angular2的alpha.28版本的官方发行包中，没有包含默认ShadowDom策略之外的另两种策略实现模块，因此我们单独打了一个包render.dev.js。

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>template - scoped&shadowdom strategy</title>
<script type="text/javascript" src="lib/system@0.16.11.js"></script>
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<script type="text/javascript" src="lib/render.dev.js"></script>
<script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
<h1>我是H1，我在组件外</h1>
<ez-app></ez-app>

<script type="module">
import {bind,Component,View,bootstrap} from "angular2/angular2";
import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
import {EmulatedUnscopedShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
import {EmulatedScopedShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy';
import {NativeShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';

@Component({selector:"ez-app"})
@View({
template:"<h1>我是H1，我在组件内</h1>",
styles:["h1{color:red}"]
})
class EzApp{}

var injectables = [
bind(ShadowDomStrategy)
.toFactory((doc) => new NativeShadowDomStrategy(doc.head), [DOCUMENT_TOKEN])
];
bootstrap(EzApp,injectables);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航