我目前正在导入第三方组件。对于我的用例,我需要重写那个特定的组件模板。
因为这是一个第三方组件,并且是通过 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>
指定我想要的模板吗?不编辑那个特定的组件声明?或者甚至只是扩展它?
最佳答案
玩过之后。一个简单的扩展将适用于我的用例。
基本上我创建了一个扩展 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,因为它是一个简单的扩展,而不是访问注释并强制更改它。
关于typescript - 覆盖/扩展第三方组件的模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35018592/