我正在尝试设置这些容器的宽度,但我还需要注意@Input
上的变化,因为DOM基于@Input
发生了变化
@Input('connections') public connections = [];
@ViewChildren('containers', { read: ElementRef }) chipContainers: QueryList<ElementRef>;
这个@Input
的值可以改变,所以我需要使用ngOnChanges
public ngOnChanges() {
if (this.connections) {
const containerArr = this.containers.toArray();
if (containerArr.length) {
containerArr.forEach((container) => {
const child = container.nativeElement.children;
if (child.length) {
const baseWidth = child[0].clientWidth + 100; // omitted calc to find baseWidth
container.nativeElement.style.width = `${baseWidth}px`;
}
});
}
}
}
似乎在设置container.nativeElement.style.width
之后,更改没有正确呈现,因为我可以在console.log
时看到新的宽度值。
尝试了this.renderer.setStyle(chipContainer.nativeElement, 'width',
${baseWidth}px);
,但由于某种原因也不起作用
1条答案
按热度按时间7xzttuei1#
一个可能的解决方案是使用
AfterViewInit
生命周期钩子而不是ngOnChanges
,以确保在尝试修改容器的宽度之前完全呈现DOM。