@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. 【JavsScript】转载---如何成为优秀的前端

    题记 做好前端 关于离职 如何成为优秀的前端 书籍推荐 博客推荐 源码阅读 去面试 14年计划 招聘信息 题记 四月前,低迷.失志踌躇不前形容自己再好不过,中途来了一次彻底的醒悟,于是我发现自己变得勤 ...

  2. TP复习11

    ## ThinkPHP 3.1.2 模板中的基本语法#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.导入CSS和JS文件 1.css link js ...

  3. Swift用UIBezierPath来画圆角矩形、自定义多路径图形

    最好的特点就是可以自定义路径,设置圆角和描边都很方便,以下为代码和效果,均在playground中实现 1.首先实现一个圆角矩形,并对此路径描边,为其绘制一个轮廓. 1 2 3 4 5 6 7 8 9 ...

  4. iOS开发——UI篇Swift篇&玩转UItableView(一)基本使用

    UItableView基本使用 class ListViewController: UIViewController , UITableViewDataSource, UITableViewDeleg ...

  5. java.net.SocketException四大异常解决方案【转】

    java.net.SocketException如何才能更好的使用呢?这个就需要我们先要了解有关这个语言的相关问题.希望大家有所帮助.那么我们就来看看有关java.net.SocketExceptio ...

  6. mysql loop if

    MYSQL: loop  if ITERATE: 跳出此次循环,直接进入到下一次循环中 LEAVE: 结束循环,跳出整个循环. demo如下: CREATE TABLE t(    v INT NOT ...

  7. JavaScript跨域实现

    最近在做个上传文件的服务,其中包含一个上传的web页面.目的是想客户端页面嵌套这个web页面,然后直接将文件上传到服务器. 因为文件不同所以需要保存到的文件夹名称也不一样,所以客户端需要传递一个文件夹 ...

  8. LeetCode38 Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  9. kafka java客户端编程

    kafka_2.10-0.8.1.1 maven <dependencies> <dependency> <groupId>org.apache.kafka< ...

  10. JQuery方法扩展

    第一种 extend <!-- extend 扩展jQuery,其实就是增加一个静态方法 --> 定义: $.extend({ sayHello:function(name) { aler ...