typescript - 覆盖/扩展第三方组件的模板

Question

我目前正在导入第三方组件。对于我的用例，我需要重写那个特定的组件模板。

因为这是一个第三方组件，并且是通过 npm 包导入的，所以我不想更改组件，所以我不必在每次更新包时都更新它。

有没有办法覆盖另一个组件的模板？

我知道你可以使用 <ng-content>如果你想注入(inject)一些元素。但是这里是行不通的。

html 是这样的:

<third-party-component [items]="items" [example]="example">

Controller 是这样的:

import {THIRD_PARTY_DIRECTIVES} from 'ng2-select/ng2-select';

@Component({
  selector: 'example-component',
  directives: [THIRD_PARTY_DIRECTIVES]
})
export class Example {

  private items: Array<string> = [
    'whatever', 'whatever2', 'whatever3'
  ];
}

有什么方法可以为 <third-party-component> 指定我想要的模板吗？不编辑那个特定的组件声明？或者甚至只是扩展它？

Answer 1

玩过之后。一个简单的扩展将适用于我的用例。

基本上我创建了一个扩展 thirdPartyClass 的类。

这里发生的是我通过创建自己的选择器并仅导入类来覆盖 thirdPartyClass 的模板。

是这样的:

import {component} from 'angular2/core';
import {thirdPartyClass} from 'example/example';

@Component({
  selector: 'my-selector',
  template: '<div>my template</div>'
})

export class MyOwnComponent extends thirdPartyClass {
  constructor() {
     super()
  }
}

注意事项:

• 如果您使用此方法，请不要忘记导入 thirdPartyClass 模板中使用的任何管道。
• 如果功能在依赖于模板的 thirdPartyClass 中更新，您将需要手动更新。
• 我更喜欢此解决方案而不是引用 ReflectMetaData，因为它是一个简单的扩展，而不是访问注释并强制更改它。