Angular2中的metadata(元数据)

时间:2021-01-07 12:25:51

@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);
    }
}