Typescript 替代/扩展第三方零部件的模板

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

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

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

我知道如果你想注入一些元素，你可以使用。但这是不可行的

html是这样的：

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

控制器是这样的：

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'
  ];
}

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()
  }
}

---

是否有任何方法可以在不编辑特定组件声明的情况下指定所需的模板？或者仅仅扩展它？

您可以使用Reflect来更改组件的元数据。以下是：

---

只需确保在将模板注入父组件之前更新模板。还要检查您需要访问的，可能是您案例中的DirectiveMetadata。

在使用它之后。一个简单的扩展将适用于我的用例

基本上，我创建了一个扩展第三方类的类

这里发生的事情是，我通过创建自己的选择器并仅导入类来覆盖第三方类的模板

大概是这样的：

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'
  ];
}

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()
  }
}

注:

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

---

谢谢你的努力。我只通过扩展类找到了一个简单的解决方案。检查我的答案。@Joelalmeda工作得很好，我会记住它；这是一个比我提供的更好的解决方案，但我想如果您不能访问TS文件，可以使用反射元数据…我同意。我想，如果您无法访问classIt，反射是唯一的解决方案。当组件位于单独的模块中时，反射不起作用。