Angular 16/17中如何为组件装饰器定义默认属性？

问题背景 #

我定义的组件如下：

@Component({ 
selector: 'my-component', 
standalone: true, 
host: { class: 'flx' }, 
changeDetection: ChangeDetectionStrategy.OnPush, 
imports: [MyModule], 
template: `<div>My Awesome Component </div>`})
export class MyComponent {}

大部分组件都重复包含这三个属性：

standalone: true, 
host: { class: 'flx' }, 
changeDetection: ChangeDetectionStrategy.OnPush,

之前用扩展运算符合并默认属性的方法在Angular 16/17中失效，需要创建包含默认逻辑的自定义组件装饰器方案。

可行方案：自定义组件装饰器 #

通过封装Angular原生@Component装饰器，实现默认属性的自动注入，用户传入的属性会覆盖默认值。

1. 实现自定义装饰器 #

import { Component, ComponentDecorator, ChangeDetectionStrategy } from '@angular/core';

// 定义全局默认组件配置
const DEFAULT_COMPONENT_SETTINGS = {
  standalone: true,
  host: { class: 'flx' },
  changeDetection: ChangeDetectionStrategy.OnPush,
};

// 自定义组件装饰器
export const MyComponent = (config: Partial<Parameters<ComponentDecorator>[0]>): ClassDecorator => {
  // 合并默认配置与用户配置，用户配置优先级更高
  const mergedConfig = { ...DEFAULT_COMPONENT_SETTINGS, ...config };
  
  // 特殊处理host属性：如果用户传入host，合并class而非覆盖
  if (config.host) {
    mergedConfig.host = {
      ...DEFAULT_COMPONENT_SETTINGS.host,
      ...config.host,
    };
  }

  return Component(mergedConfig);
};

2. 使用自定义装饰器 #

import { MyComponent } from './decorators';
import { MyModule } from './my-module';

@MyComponent({
  selector: 'my-component',
  imports: [MyModule],
  template: `<div>My Awesome Component</div>`
})
export class MyComponent {}

方案说明 #

• 该装饰器完全兼容Angular 16/17的装饰器机制，直接调用原生@Component传递合并后的元数据，避免了扩展运算符可能引发的元数据检查问题。
• 可根据需求调整合并逻辑，比如上述代码中对host属性做了合并处理，确保默认的flx类不会被用户传入的host配置覆盖。
• 所有原生@Component支持的属性都可以通过自定义装饰器传入，完全保留原生组件的所有功能。

内容的提问来源于stack exchange，提问作者vitaly