扩展/装饰 Angular 2 组件和指令 [英] Extending/decorating Angular 2 components and directives
问题描述
我有一些用于 Angular 2 中组件和指令的继承和装饰(如装饰器模式中)的用例.
I have some use cases for inheritance and decoration (as in Decorator pattern) of components and directives in Angular 2.
该示例是具有不适合这种情况的基本模板的组件，以至于更容易定义新模板而不是以编程方式修改现有模板的 DOM.其余的组件元数据应该被继承.
The example is component with basic template that doesn't suit the case, to the point when it easier to define a new template instead of modifying the DOM of existing one programmatically. The rest of component metadata should be inherited.
基本上是
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 的包装器组件可能是湿的和脏的:
Notice that ThirdPartyComponent has numerous inputs. There may be cases when it is beneficial to modify a component internally instead of wrapping it and modifying its behaviour from the outside. A wrapper component that enumerates them all in template and transfers them to ThirdPartyComponent may be WET and dirty:
<third-party inputs="inputs" that="that" should="should" be="be" enumerated="enumerated">
在某些情况下，可能会禁止由包装组件引入的额外布局元素.
Extra layout elements that are introduced by wrapper components may be prohibited in some cases.
ThirdPartyComponent 可能是其他第三方组件使用的核心组件(按钮).那么它们也应该受到影响，因此可能需要在整个注入器中装饰装饰器"，而不仅仅是扩展它.
ThirdPartyComponent may be core component (a button) that is used by other third-party components. Then they should be affected too, so it may be necessary to 'decorate the decorator' all over the injector, not just extend it.
在 Angular 1.x 中 thirdPartyDirective 是一种服务，它提供对组件 DDO 的完全访问权限，因此它们可以被装饰、扩展、油炸等.Angular 2 中这种方法的直接对应物是什么?如果这违反了某些规则并使保修失效，没关系.
In Angular 1.x thirdPartyDirective is a service that gives full access to component DDOs, so they could be decorated, extended, deep fried, etc. What are direct counterparts to this approach in Angular 2? If this breaks some rules and voids the warranty, it's ok.
如何扩展不导出其元数据的组件/指令?
How can a component/directive that doesn't export its metadata be extended?
如何修改现有组件的元数据?
How can the metadata of existing component be modified?
推荐答案
您的输入将自动从父类继承.关于 Component 装饰器本身的属性，在 Angular2 中没有本地方法可以做到这一点.Angular2 团队不会为此提供支持:https://github.com/角度/角度/问题/7968#issuecomment-219865739.
Your inputs will be inherited from the parent class automatically. Regarding properties of the Component decorator itself, there is no native way to do that in Angular2. The Angular2 team won't provide support for this: https://github.com/angular/angular/issues/7968#issuecomment-219865739.
如果你真的想要这样的东西，你需要使用一个更新注释的自定义装饰器来实现......
If you really want something like that, you need to implement with a custom decorator that updates annotations...
这篇文章可能会让您感兴趣:
This article could interest you:
这篇关于扩展/装饰 Angular 2 组件和指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
