扩展/装饰 Angular 2 组件和指令

Question

我有一些 Angular 2 中组件和指令的继承和装饰（如装饰器模式）的用例。

该示例是具有不适合此情况的基本模板的组件，以至于定义新模板而不是通过编程修改现有模板的 DOM 更容易。其余的组件元数据应该被继承。

基本上是这样

export const BASE_SOME_COMPONENT_METADATA = { ... };

@Component(BASE_SOME_COMPONENT_METADATA);
export class BaseSomeComponent { ... }

...

import { BaseSomeComponent, BASE_SOME_COMPONENT_METADATA } from '...';

@Component(Object.assign({}, BASE_SOME_COMPONENT_METADATA, { template: '...' });
export class SomeComponent extends BaseSomeComponent {}

更复杂的情况是

@Component({ ... });
export class ThirdPartyComponent {
  @Input() ...;
  @Input() ...;
  @Input() ...;
  ...
}

...

import { ThirdPartyComponent as BaseThirdPartyComponent } from '...';

@Component({
  // may modify or replace any of the original properties
  template: ...,
  styles: ...
  ...
});
export class ThirdPartyComponent extends BaseThirdPartyComponent {}

请注意，ThirdPartyComponent 有许多输入。在某些情况下，在内部修改组件而不是包装它并从外部修改其行为是有益的。在模板中枚举它们并将它们传输到ThirdPartyComponent 的包装器组件可能是 WET 和脏的：

<third-party inputs="inputs" that="that" should="should" be="be" enumerated="enumerated">

在某些情况下，包装组件引入的额外布局元素可能会被禁止。

ThirdPartyComponent 可能是其他第三方组件使用的核心组件（按钮）。那么它们也应该受到影响，因此可能需要在整个注入器上“装饰装饰器”，而不仅仅是扩展它。

在 Angular 1.x 中，thirdPartyDirective 是一项服务，它提供对组件 DDO 的完全访问权限，因此可以对它们进行修饰、扩展、油炸等。Angular 2 中这种方法的直接对应物是什么？ 如果这违反了某些规则并导致保修失效，没关系。

如何扩展不导出其元数据的组件/指令？

如何修改现有组件的元数据？

Answer 1

您的输入将自动从父类继承。关于Component 装饰器本身的属性，Angular2 中没有本地方法可以做到这一点。 Angular2 团队不会为此提供支持：https://github.com/angular/angular/issues/7968#issuecomment-219865739。

如果你真的想要这样的东西，你需要用一个更新注释的自定义装饰器来实现......

您可能会对这篇文章感兴趣：

• https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.8r5fuys6l