Angular2 наследует декораторы в производном классе

Question

У меня есть BaseComponent с template набор. Я хочу использовать один и тот же шаблон HTML в компоненте, расширяющем базовую. Я знаю, что наследование класса в Angular2 предназначено только для классов, а не для декораторов. Поэтому мне кажется, что мне нужен новый декоратор, который найдет родительский класс и все его декораторы и применится к текущему классу. Некоторые свойства декораторов должны быть изменены (например, selector для @Component).

Answer 1

Вы можете создать свой собственный компонент, который создает и регистрирует метаданные компонентов, используя один из его родительского класса.

Нечто подобное:

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])) { 
     annotation[key] = parentAnnotation[key]; 
     } 
    }); 
    var metadata = new ComponentMetadata(annotation); 

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

Вы можете использовать его таким образом:

@Component({ 
    template: ` 
    (...) 
    ` 
}) 
export class ParentComponent { 
} 

@CustomComponent({ 
    selector: 'test' 
}) 
export class ChildComponent extends ParentComponent { 
} 

Посмотреть этот вопрос более подробно:

• Extending component decorator with base class decorator