は角度2のdecorator/annonationを継承しています

Question

角度2のバージョンRC5のバージョンの前にカスタムデコレータを使用していましたが、エラーは発生しません。これを解決する考えはありますか？

チュートリアル（NgModule前 ）Angular2のRC5のバージョンの前に罰金働いていたコードの上https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.yqki96a5y で

エラー・スタックだった

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

として上記使用

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

- >

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以降 oopの原則に従って、以下の例：

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

これはちょっと役立ちます。