如何覆盖Angular 2中的模具组件模板

Question

我使用https://github.com/telekom/scale组件库(不是编写我自己的库(。那里的所有组件都是用模具制造的，它们可以毫无问题地使用。

然而，我需要稍微更改一个模具组件html，并添加一个额外的标签，例如。

问题是我找不到如何扩展Stencil组件并覆盖其渲染模板。

我知道我可以通过render方法的来源简单地重建模板，但我希望有更好的方法。

Answer 1

假设我们有一个带有bla-bla-tag选择器的组件。根据您的情况，可能会应用几个选项。

案例1：在嵌套组件中准备一些东西

<bla-bla-tag>
<span>I want to see it before inner component stuff</span>
</bla-bla-tag>

案例2：修改DOM

问题是等待内部组件完全加载其视图。

幸运的是，HTMLStencilElement接口中有一个钩子：componentOnReady(): Promise<this>;。

模板文档有以下示例：

export class HomeComponent {
@ViewChild(TestComponent) myTestComponent: ElementRef<TestComponent>;
async onAction() {
await this.myTestComponent.nativeElement.testComponentMethod();
}
}

因此，对我来说，最终的解决方案是通过ViewChild访问模板组件，然后使用上面示例中的钩子。

视图：

<scale-text-field
#input
...
></scale-text-field>

组件代码：

@Component({
selector: 'bla-bla-tag',
templateUrl: './some.component.html',
styleUrls: ['./some.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class SomeComponent implements AfterViewInit {
@ViewChild('input') textField!: ElementRef<HTMLScaleTextFieldElement>;
ngAfterViewInit() {
this.textField.nativeElement.componentOnReady().then(scaleTextField => {
// any dom modifications
})
}
}

此外，我需要处理一些css类，以防止Angular封装它们：ViewEncapsulation.None