Extending angular2 component decorator

2
votes

With angular 2.0.0-beta.8 I've created a couple of custom decorator that extends the @Component decorator.

To make that I've used this code:

import {..., View } from 'angular2/core';

...

export var MyCustomComponent:ComponentFactory =
    <ComponentFactory>makeDecorator(MyCustomComponentMetadata, (fn:any) => fn.View = View);

Now, with angular 2.0.0-beta.12, the 'View' decorator has been dropped so the import throw an error because 'angular2/core' has no exported member 'View'.

How I'm supposed to create a custom component decorator?

2
angular
It's not clear to me what you're asking for. @Component() + @View() have become just @Component() Can't you just extend @Component() instead of @View()? - Günter Zöchbauer
To make MyCustomComponent decorator, I need to call the function makeDecorator that, as second argument, takes (fn:any) => fn.View = View. For this to compile, I need to import View. I don't want to extend the @View() decorator but only the @Component() decorator. - Gigitsu
Can't you use Component instead, view ceased to exist. - Günter Zöchbauer

2 Answers

4
votes

You can do

import {Component} from 'angular2/angular2';
import {MyCustomComponentMetadata} from ...;

export function MyCustomComponent(config: MyCustomComponentMetadata) {
  return function(cls) {
    var annotations = Reflect.getMetadata('annotations', cls) || [];
    annotations.push(new Component(config));
    Reflect.defineMetadata('annotations', annotations, cls);
    return cls;
  };
};
1
votes

Angular 6 no more uses Reflection to define metadata for components. To override the built-in component decorator you could do something like below,

import { Component } from '@angular/core';
import componentRegistry from './ComponentRegistry';
 
function MyComponent(args: any = {}): (cls: any) => any {
  const ngCompDecorator = Component(args);
 
  return function (compType: any) {
    ngCompDecorator(compType);
    args.type && componentRegistry.register(args.type, compType, args.model);
  }
}
 
export default MyComponent;

They metadata is stored in a static property called __annotations__ in the component's constructor. To know more about this please check here