Question

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

public class Stack {

    private Node first ;

    private class Node {
        private String item ;
        private Node next ;
    }

    public void push(String item) {
        Node second = first ;
        first.item = item ;
        first.next = second ;
    }
}

将上面用作

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

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

错误堆栈 - ＆gt;

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

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

希望这有点帮助。

在angular 2 ver 2.x.x中继承装饰器/ annonation

1 个答案: