angular2 学习二 directives

2019独角兽企业重金招聘Python工程师标准>>>

directives - 使用组件

在Angular2中，一个组件的模板内除了可以使用标准的HTML元素，也可以使用自定义的组件！

这是相当重要的特性，意味着Angular2将无偏差地对待标准的HTML元素和你自己定义的组件。这样，你可以建立自己的领域建模语言了，这使得渲染模板和视图模型的对齐更加容易，也使得模板的语义性更强：

声明要在模板中使用的组件

不过，在使用自定义组件之前，必需在组件的ViewAnnotation中通过directives属性声明这个组件：

@View({
directives : [EzComp],
template : "<ez-comp></ez-comp>"
})

你应该注意到了，directives属性的值是一个数组，这意味着，你需要在这里声明所有你需要在模板中使用的自定义组件。

修改示例代码：
1. 增加一个EzLogo组件
2. 在EzCard组件的模板中使用这个组件

HTML

<!doctype html>
<html>
<head><meta charset="utf-8"><title>template - component </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/system.config.js"></script>
</head>
<body><ez-app></ez-app><script type="module">import {Component,View,bootstrap} from "angular2/angular2";@Component({selector:"ez-app"})@View({directives:[EzCard,EzLogo],template:`<div class="ez-app"><h1>EzApp</h1><ez-card></ez-card><ez-logo></ez-logo></div>`})class EzApp{}@Component({selector : "ez-card"})@View({template : `<div class="ez-card"><h1>EzCard</h1></div>`})class EzCard{}@Component({selector : "ez-logo"})@View({template : `<div class="ez-logo"><h1>EzLogo</h1></div>`})class EzLogo{}bootstrap(EzApp);</script>
</body>
</html>

CSS

div.ez-app{background:red;padding:10px;}
div.ez-card{background:green;padding:10px;}
div.ez-logo{background:blue;padding:10px;}

转载于:https://my.oschina.net/martin123/blog/797967

angular2 学习二 directives - 使用组件相关推荐

angular2 学习二最简单的模板
2019独角兽企业重金招聘Python工程师标准>>> 最简单的模板组件的View注解用来声明组件的外观,它最重要的属性就是template - 模板. Angular2的模板是兼 ...
Angular2学习笔记——在子组件中拿到路由参数
工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...
【Vue学习】—Vue UI组件库（二十八）
[Vue学习]-Vue UI组件库(二十八) 一.移动端常用的UI组件库二.PC端常用的UI组件库三.具体使用自行查看文档,这里就不做概述了
VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例演示 ...
Salesforce Lightning开发学习（二）Component组件开发实践
lightning的组件区分标准组件.自定义组件和AppExchange组件.标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立.下面我们写一个简单的 ...
WEB前端 vue学习二组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
EasyUI学习总结(五)——EasyUI组件使用
EasyUI学习总结(五)--EasyUI组件使用一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程 ...
OpenCV学习(二十一) ：计算图像连通分量:connectedComponents(),connectedComponentsWithStats()
OpenCV学习(二十一) :计算图像连通分量:connectedComponents(),connectedComponentsWithStats() 1.connectedComponents() ...
OpenCV学习(二十) ：分水岭算法:watershed()
OpenCV学习(二十) :分水岭算法:watershed() 参考博客: OpenCV-分水岭算法图像处理--分水岭算法 OpenCV学习(7) 分水岭算法(1) Opencv分水岭算法--wat ...

angular2 学习二 directives - 使用组件

directives - 使用组件

angular2 学习二 directives - 使用组件相关推荐

最新文章

热门文章