文档章节

angular2 学习二 directives - 使用组件

王福林
 王福林
发布于 2016/12/01 11:19
字数 378
阅读 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
博文 93
码字总数 36521
作品 0
徐汇
程序员
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro ⋅ 05/30 ⋅ 0

源码分析 @angular/cdk 之 Portal

Portal 是什么 最近在学习 React 时,发现 React 提供了 Portals 技术,该技术主要用来把子节点动态的显示到父节点外的 DOM 节点上,该技术的一个经典用例应该就是 Dialog 了。设想一下在设计...

lx1036 ⋅ 05/29 ⋅ 0

AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 27分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 47分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 52分钟前 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 59分钟前 ⋅ 0

文件压缩和打包zip、tar

第六章 文件压缩和打包 6.5 zip压缩工具 zip命令可以用来解压缩文件,或者对文件进行打包操作。zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有“.zip”扩展名的压缩文件。 注意:...

弓正 ⋅ 今天 ⋅ 0

vuex

一、状态对象如何赋值给内部对象。三种方式: 1、使用computed赋值,一定要写this,不然找不到$store。 computed:{ count(){ return this.$store.state.count; }} 2、通...

大美琴 ⋅ 今天 ⋅ 0

javaScript 设计模式

1、构造函数模式 ` /** 构造一个动物的函数 */ function Animal(name, color){ this.name = name; this.color = color; this.getName = function(){ return this.name; } } // 实例一个对象 ......

fangPeng_ ⋅ 今天 ⋅ 0

日常嘚瑟:TeamCity构建中解压和打包tar

要弄一个新的构建,很简单,从两个构建的tar格式Artifact中分别取一部分,重新打一个tar。 所以,我去写个脚本用curl下载两个依赖的Artifact,然后解压移动重新打个tar? 开什么玩笑,我的技...

谷永权 ⋅ 今天 ⋅ 0

Istio官方文档中文版

阅读目录 Istio官方文档中文版 回到目录 Istio官方文档中文版 http://istio.doczh.cn/ https://istio.io/docs/concepts/what-is-istio/goals.html 为什么要使用Istio? 在从单体应用程序向分...

xiaomin0322 ⋅ 今天 ⋅ 0

CentOS 7 Omnibus 包安装 GitLab 并汉化记录

系统环境 操作系统:CentOS 7GitLab:gitlab-ce-10.8.4-ce.0.el7.x86_64.rpm 下载Omnibus安装包 使用国内镜像加速下载地址 # wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el......

admin_qing ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部