angular2的注解到底解决什么问题的?

@Component({ selector: "XXXX" }) export Class Appcomponent {}换种方式 export Class Appcomponent implement Component { constructor() { this.selector = "XXXX"; } } 到底注解做了些什么? 大神们能否深入浅出的给解释下。 这样不行吗????
关注者
17
被浏览
1255
到底注解做了些什么?

提供元数据。

export Class Appcomponent implement Component { constructor() { this.selector = "XXXX"; } } 这样不行吗????

不行,所有元数据都是类所具有的,不是任何实例所特有的。


实际上写成类的静态属性确实是可以的,不过 Component 的元数据是一个整体。

类静态属性的写法一:

class AppComponent {
  static get annotations() {
    return [
      new ng.core.Component({
        selector: 'my-app',
        template: '<h1>Hello Angular</h1>'
      })
    ];
  }
}

在线示例:embed.plnkr.co/r99zg8aq

类静态属性的写法二:

class AppComponent {
  static get decorators() {
    return [{
      type: ng.core.Component,
      args: [{
        selector: 'my-app',
        template: '<h1>Hello Angular</h1>'
      }]
    }];
  }
}

在线示例:embed.plnkr.co/JaCQA9AR

注:需要打开在线示例的话请确保你的浏览器支持 ES6。


Decorator 从来不是必须的用法,只是最好看的用法(以及目前 AOT 编译器所支持的用法)。