扩展/装饰Angular 2组件和指令 [英] Extending/decorating Angular 2 components and directives
问题描述
我有一些用例，用于Angular 2中组件和指令的继承和修饰(如Decorator模式).
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屋！
