angular2 学习二 directives - 使用组件
angular2 学习二 directives - 使用组件
王福林 发表于1年前
angular2 学习二 directives - 使用组件
  • 发表于 1年前
  • 阅读 25
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

directives - 使用组件

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

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

component-template

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

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

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

你应该注意到了,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;}

 

共有 人打赏支持
粉丝 9
博文 92
码字总数 34910
×
王福林
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: