Angular自定义@Component类装饰器：如何避免覆盖原组件模板？

现有一个Angular组件类：

@Component({
    templateUrl: './simple-text-viewer.component.html',
    styleUrls: ['./simple-text-viewer.component.scss'],
})
export class SimpleTextViewerComponent extends BaseComponent {
}

想要创建一个装饰器WithDefaultStyles，通过@HostBinding或@HostListener为组件添加默认行为，最初的实现如下：

export function WithDefaultStyles() {
    return function <T extends { new(...args: any[]): any }>(Base: T) {
        @Component({template: ''})
        class Mixin extends Base {

            @HostBinding('style')
            hostStyles: { [key: string]: string } = {};

            @HostListener('mouseover')
            onMouseOver() {
                this.hostStyles['color'] = 'red';
            }

        }

        return Mixin;
    }
}

期望的使用方式：

@Component({
    templateUrl: './simple-text-viewer.component.html',
    styleUrls: ['./simple-text-viewer.component.scss'],
})
@WithDefaultStyles() // 应用自定义装饰器
export class SimpleTextViewerComponent extends BaseComponent {
}

遇到的问题：

• 移除Mixin类上的@Component({template: ''})后，Angular编译器报错，提示无法使用@HostBinding和@HostListener
• 替换为@Directive()时，出现“指令无法继承组件”的错误
• 当前代码会覆盖原组件的templateUrl配置，导致原模板被忽略，渲染空内容

请问如何实现该装饰器，同时不覆盖原有组件的@Component配置？

核心思路是直接修改原组件类的元数据，同时为类添加需要的属性和方法，而非通过创建带@Component的Mixin类覆盖原配置。

修改后的装饰器代码：

import { Component, HostBinding, HostListener } from '@angular/core';

export function WithDefaultStyles() {
    return function <T extends { new(...args: any[]): any }>(OriginalComponent: T) {
        // 获取原组件的@Component元数据
        const originalMetadata = (Reflect.getMetadata('annotations', OriginalComponent) || []).find(
            (anno: any) => anno instanceof Component
        );

        if (!originalMetadata) {
            throw new Error('WithDefaultStyles 仅能用于Angular组件类');
        }

        // 继承原组件并添加默认行为
        const ExtendedComponent = class extends OriginalComponent {
            @HostBinding('style')
            hostStyles: { [key: string]: string } = {};

            @HostListener('mouseover')
            onMouseOver() {
                this.hostStyles['color'] = 'red';
            }

            @HostListener('mouseout')
            onMouseOut() {
                this.hostStyles['color'] = '';
            }

            constructor(...args: any[]) {
                super(...args);
            }
        };

        // 用原组件的元数据重新装饰扩展类，保留原有配置
        Component(originalMetadata)(ExtendedComponent);

        return ExtendedComponent;
    };
}

使用方式和你期望的完全一致：

@Component({
    templateUrl: './simple-text-viewer.component.html',
    styleUrls: ['./simple-text-viewer.component.scss'],
})
@WithDefaultStyles()
export class SimpleTextViewerComponent extends BaseComponent {
}

关键说明 #

• 通过Reflect.getMetadata获取原组件的@Component元数据，确保不会丢失原有的templateUrl、styleUrls等配置
• 直接继承原组件类并添加需要的行为，再用原元数据重新装饰扩展类，既保留原组件的所有配置，又新增了默认行为
• 避免了独立Mixin类带来的元数据覆盖问题，同时满足Angular对@HostBinding/@HostListener的使用要求（必须在组件或指令类上）

内容的提问来源于stack exchange，提问作者Mariusz.v7