覆盖/扩展第三方组件的模板 [英] 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屋!