@Attrubute()

host element 中获得普通(不是@Input)属性对应的值

适用于组件嵌套或指令, 从父组件向子组件传递数据

app.component.ts

import {Component} from '@angular/core'import {Child} from './child'@Component({
    selector: 'App',
    directives:[Child],
    template: `
        <h1>App</h1>
        <child content="content"></child>
    `
})
export class App {
    public content:string = '哈哈,我是自定义属性'
}

child.ts

import {Component,Attribute} from '@angular/core';

@Component({
    selector: 'child',
    template: `
        <h1>Child {{content}}</h1>
    `
})
export class Child {
    constructor(@Attribute('content') content:string) {
        console.log(content);
    }
}

@Injectable()

标记,用来创建一个服务

import {Injectable} from '@angular/core'

@Injectable()

export class Service{

}

@Inject()

用来指定一个依赖

@Inject(Token) 注入Token对应的实例

@Inject() 则表示根据typescript对应的类型注入

import {Component,provide,Inject} from '@angular/core';
class Service {
    url:';
}

@Component({
    selector: 'App',
    providers: [provide(", {useClass: Service})],
    template: `
        <h1>App</h1>
    `
})
export class App {
    constructor(@Inject('kittencup') service:Service) {
        console.log(service.url);
    }
}

@Optional()

表示依赖是可选的,如果依赖不存在不会报错

import {Component,provide,Inject,Optional} from '@angular/core';

@Component({
    selector: 'App',
    template: `
        <h1>App</h1>
    `
})
export class App {
    constructor(@Optional() @Inject('testService') service:any) {
        console.log(service);
    }
}

Angular2中的metadata(元数据)的更多相关文章

  1. MetaData元数据

    一.基础 定义:数据库.表.列相关信息的描述.    何时使用:想取得对数据库的信息时使用.    一]数据库元数据——通过DataBaseMetaData            DataBaseMe ...

  2. Impala 中invalidate metadata和refresh

    首先了解一下:Impala如何融入Hadoop生态系统 Impala使用了Hadoop生态系统中许多熟悉的组件.Impala可以作为消费者和生产者与其他Hadoop组件交换数据,因此它可以以灵活的方式 ...

  3. Spring 中的 MetaData 接口

    什么是元数据(MetaData) 先直接贴一个英文解释: Metadata is simply data about data. It means it is a description and co ...

  4. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  5. android开发中获取<meta-data>数据

    在 AndroidManifest.xml 中,<meta-data>元素是一个键值对,往往被包含在<application> .<activity>.<se ...

  6. 如何在Angular2中使用Forms

    在Angular2中形成两个基本对象是Control和ControlGroup. 控制用户输入 Control 一个控制表示一个输入字段(ngFormControl) 一个控制可以绑定到一个input ...

  7. Android中&lt;meta-data&gt;的使用

    在AndroidManifest.xml中.<meta-data>元素能够作为子元素,被包括在<activity>.<application> .<servi ...

  8. Angular2中Input和Output

    @Input @Input是用来定义模块的输入的,用来让父模块往子模块传递内容: @Output 子模块自定义一些event传递给父模块用@Output. 对于angular2中的Input和Outp ...

  9. SpreadJS 在 Angular2 中支持哪些事件?

    SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...

随机推荐

  1. JavaWeb学习总结

    http://www.cnblogs.com/xdp-gacl/tag/JavaWeb%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/ http://www.cnblogs. ...

  2. because it is not a variable 编译错误解决方案

    1,将Stuct换为class 2,使用中间变量, 如Point p=new Point(x,y); this.Location=p; 而不能直接给struct赋值,因为值类型是不能改变的,必须生成新 ...

  3. IE9-10 option BUG

    IE 9-10下如果option元素没有定义value而在设置innerText时没有把两边的空白去掉,那么 取el.text,浏览器会进行trim, 并且伪造一个value值,此值会在刚才trim的 ...

  4. 终端I/O之终端窗口的大小

    大多数UNIX系统都提供了一种功能,可以对当前终端窗口的大小进行跟踪,在窗口大小发生变化时,使内核通知前台进程组.内核为每个终端和伪终端保存一个winsize结构: Struct winsize { ...

  5. 关于c中的%x及其它格式化符

    原文:http://blog.csdn.net/lincyang/article/details/6252443 格式化: %x表示按16进制输出:int a = 16;%02x:输出10:%03x: ...

  6. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  7. 10 ways to be a faster code reviewer--reference

    reference:http://blog.codacy.com/top-10-faster-code-reviews/ This is a blog post of our Code Reading ...

  8. linux上一些命令

    ps -ef看看有没有tomcat的进程:也可以用netstat -tnl来看tomcat的端口是否开放

  9. FOR XML PATH 解决联接返回结果集各记录问题

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  10. nodejs学习第一天

    //按照nodejs文档上第一页的例子敲了一遍运行了 迷茫 先这样吧 慢慢来 const http = require('http'); const host = '127.0.0.1'; const ...