继承装饰/ annonation in angular 2 ver 2.x.x

Question

我在使用定制修饰器之前RC5版本的角度2，但现在它不可能（给出错误）。有没有解决这个问题的想法。

export function CustomComponent(annotation: any) { 
    return function (target: Function) { 
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor; 

    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget); 

    var parentAnnotation = parentAnnotations[0]; 
    Object.keys(parentAnnotation).forEach(key => { 
     if (isPresent(parentAnnotation[key])) { 
     if (!isPresent(annotation[key])) { 
      annotation[key] = parentAnnotation[key]; 
     } 
     } 
    }); 

    var metadata = new ComponentMetadata(annotation); 

    Reflect.defineMetadata('annotations', [ metadata ], target); 
    }; 
}; 

使用上面作为

@CustomComponent({ 
    selector: 'sub' 
}) 
export class SubComponent extends AbstractComponent { 
} 

教程是在上面的代码https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.yqki96a5y 被Angular2的RC5版本之前工作正常

错误堆栈（NgModule前） - >

Error: (SystemJS) parentAnnotations is undefined 
    CustomComponent/<@http://localhost:3000/app/customCompo.js:8:13 
    DecorateConstructor@http://localhost:3000/node_modules/reflect-metadata/Reflect.js:531:29 
    decorate@http://localhost:3000/node_modules/reflect-metadata/Reflect.js:115:20 
    __decorate<@http://localhost:3000/app/app.component.js:4:84 
    AppComponent<@http://localhost:3000/app/app.component.js:16:20 
    @http://localhost:3000/app/app.component.js:12:21 
    @http://localhost:3000/app/app.component.js:1:31 
    @http://localhost:3000/app/app.component.js:1:2 
    @http://localhost:3000/app/app.module.js:13:23 
    @http://localhost:3000/app/app.module.js:1:31 
    @http://localhost:3000/app/app.module.js:1:2 
    @http://localhost:3000/app/main.js:3:20 
    @http://localhost:3000/app/main.js:1:31 
    @http://localhost:3000/app/main.js:1:2 
    ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:229:17 
    Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:113:24 
    scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:509:52 
    ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:262:21 
    Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:151:28 
    drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:405:25 
    ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:336:25 

    Evaluating http://localhost:3000/app/app.component.js 
    Evaluating http://localhost:3000/app/app.module.js 
    Evaluating http://localhost:3000/app/main.js 
    Error loading http://localhost:3000/app/main.js 
Stack trace: 
(SystemJS) parentAnnotations is undefined 
    CustomComponent/<@http://localhost:3000/app/customCompo.js:8:13 
    DecorateConstructor@http://localhost:3000/node_modules/reflect-metadata/Reflect.js:531:29 
    decorate@http://localhost:3000/node_modules/reflect-metadata/Reflect.js:115:20 
    __decorate<@http://localhost:3000/app/app.component.js:4:84 
    AppComponent<@http://localhost:3000/app/app.component.js:16:20 
    @http://localhost:3000/app/app.component.js:12:21 
    @http://localhost:3000/app/app.component.js:1:31 
    @http://localhost:3000/app/app.component.js:1:2 
    @http://localhost:3000/app/app.module.js:13:23 
    @http://localhost:3000/app/app.module.js:1:31 
    @http://localhost:3000/app/app.module.js:1:2 
    @http://localhost:3000/app/main.js:3:20 
    @http://localhost:3000/app/main.js:1:31 
    @http://localhost:3000/app/main.js:1:2 
    ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:229:17 
    Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:113:24 
    scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:509:52 
    ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:262:21 
    Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:151:28 
    drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:405:25 
    ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:336:25 

    Evaluating http://localhost:3000/app/app.component.js 
    Evaluating http://localhost:3000/app/app.module.js 
    Evaluating http://localhost:3000/app/main.js 
    Error loading http://localhost:3000/app/main.js 

Answer 1

不知道它是否以你曾经使用过的方式工作，但是自从Angular 2.3.0 他们按照它们应该遵循的原则开箱即用。示例如下：

import { SomeService } from './../services/someservice'; 
import { Component, OnInit, Input } from '@angular/core'; 

// decorators work, and are overwritten by the child. 
@Component({ 
    selector: 'app-parent', 
    template: ` 
    <div> {{getText()}}</div> 
    `, 
}) 
// can use abstract class, with abstract methods, which require 
// the child class to implement them. 
@extendedCustomDecorator('Some custom stuff for parent') 
export class ParentComponent implements OnInit { 
    // decorators work 
    @Input() text: string; 

    private t: string = 'this is the parent'; 

    // dependency injection works. 
    // 
    constructor(protected ss: SomeService) { } 

    // lifetime hooks work, and are called 
    // need to remember to explicitly call them if you override them 
    // from the child with super.ngOnInit() 
    ngOnInit() { 
    console.log('parent', this.text); 

    } 
    // methods can be private, protected etc. 
    // and follow normal oop principles. 
    getText(): string { 
    return `${this.t} ${this.text}`; 
    } 

    getText2(): string { 
    return ' this is second text from parent'; 
    } 

} 


@Component({ 
    selector: 'app-child', 
    template: ` 
    <div>{{getText()}}</div> 
    ` 
    }) 
@extendedCustomDecorator('Some custom stuff for child') 
export class ChildComponent extends ParentComponent implements OnInit { 

    @Input() text: string; 

    ngOnInit() { 
    // super.ngOnInit() works if you want both to be called 
    // console.log('child', this.text, this.ss.someSharedValue); 
    } 

    getText(): string { 
    return `this is child component some text from parent: ${super.getText()}, ${this.getText2()}`; 
    } 

} 

export function extendedCustomDecorator(value: string) { 
    return function (
    target: Function // The class the decorator 
) { 
    let parentTarget = Object.getPrototypeOf(target.prototype).constructor; 
    console.log('extendedCustomDecorator', value, target); 
    }; 
} 

希望这会有所帮助。