樣式動態創建Angular組件

Question

是否可以在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) {
    // ????
}

所以我想創建組件，然后相對於鼠標設置左側和頂部位置。 我正在創建對鼠標來說很粘的組件。 是否有可能重現我需要的邏輯？

Answer 1

您可以在動態添加的組件中添加如下所示的主機綁定，然后在創建組件后為綁定屬性分配值：

@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

Answer 2

  componentRef.location.nativeElement.style = `
    left: 50px;
    top: 30px;
  `;