Extending/decorating 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 的包装器组件可能是湿的和脏的：

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

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

ThirdPartyComponent可能是被其他第三方组件使用的核心组件（一个按钮）。那么它们也应该受到影响，因此可能有必要 'decorate the decorator' 整个注射器，而不仅仅是扩展它。

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

如何扩展不导出其元数据的 component/directive？

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

Answer 1

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

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

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

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

Extending/decorating Angular 2 个组件和指令

Extending/decorating Angular 2 components and directives

javascript

typescript

angular2-directives

ecmascript-next

angular