覆盖/扩展第三方组件的模板 [英] Override/extend third-party component's template

问题描述

我当前正在导入第三方组件.对于我的用例，我需要覆盖该特定组件模板.

I am currently importing a third party component. For my use case I need to override that specific component template.

由于这是第三方组件，并且是通过npm包导入的，所以我不想更改该组件，因此不必在每次更新包时都进行更新.

Since this is a third party component, and imported via npm package, I don't want to change the component so I don't have to update it everytime the package is updated.

有什么办法可以覆盖另一个组件的模板吗?

Is there any way to overwrite the template of another component?

我知道如果要注入某些元素，可以使用<ng-content>.但是这里不可行.

I know you can use <ng-content> if you want to inject some element. But here is not viable.

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

是否可以在不编辑特定组件声明的情况下为<third-party-component>指定所需的模板?甚至只扩展它?

Is there any way I can specify the template I want for <third-party-component> without editing that specific component declaration? Or even extend it only ?

推荐答案

在玩完之后.一个简单的扩展将适用于我的用例.

After playing around with it. A simple extend will work for my use case.

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

Basically I created a class that extends the thirdPartyClass.

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

What happens here is that I am overwriting the template for the thirdPartyClass by creating my own selector and importing only the class.

类似这样的东西:

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，因为它是一个简单的扩展，而不是访问注释并强行更改它.

• If you are using this method, don't forget to import any pipes that are used in the thirdPartyClass template.
• If the functionality is updated in the thirdPartyClass that depends upon the template, you'll need to update by hand.
• I prefered this solution to refering to the ReflectMetaData because its a simple extend instead of accessing the annotations and force changing it.

这篇关于覆盖/扩展第三方组件的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！