gpt4 book ai didi

angular - 样式动态创建的 Angular 组件

转载 作者:太空狗 更新时间:2023-10-29 17:47:59 26 4
gpt4 key购买 nike

是否可以在 Angular4 中为动态创建的组件设置样式?我有下一个代码:

createComponent(event) {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(SbImageGalleryPinComponent);

let componentRef = this.pin.createComponent(componentFactory);

document.querySelector('.sb-component-gallery__container').addEventListener('mousemove', this.onMouseMove.bind(this));
}

onMouseMove(event) {
// ????
}

所以我想创建组件,然后相对于鼠标设置左侧和顶部的位置。我正在创建粘在鼠标上的组件。是否可以重现我需要的逻辑?

最佳答案

您可以在动态添加的组件中添加如下所示的主机绑定(bind),然后在创建组件后为绑定(bind)的属性赋值:

@HostBinding('style.left.px')
left:number;

@HostBinding('style.top.px')
top:number;
componentRef.instance.left = 50;
componentRef.instance.top = 30;

可能需要调用

componentRef.changeDetectorRef.detectChanges();

之后也是。

另见 https://angular.io/api/core/ComponentRef

关于angular - 样式动态创建的 Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47458921/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com