У меня есть несколько вариантов использования наследования и украшения (как в шаблоне Decorator) компонентов и директив в 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 может быть основным компонентом (кнопкой), который используется другими сторонними компонентами. Затем они также должны быть затронуты, поэтому может потребоваться «украсить декоратор» по всему инжектору, а не просто расширить его.
В Angular 1.x thirdPartyDirective - это служба, которая предоставляет полный доступ к компонентам DDO, чтобы их можно было оформить, расширить, поджарить и т. Д. Каковы прямые аналоги этого подхода в Angular 2? Если это нарушает некоторые правила и аннулирует гарантию, ничего страшного.
Как можно расширить компонент / директиву, не экспортирующую свои метаданные?
Как можно изменить метаданные существующего компонента?
