Question

你好，我正在主component.ts文件中动态创建一个组件，如下所示：

const colorPickerDropdownFactory = this._resolver.resolveComponentFactory(
  ColorPickerComponent
);

this.colorPickerDropdown = this.colorPickerContainer.createComponent(
  colorPickerDropdownFactory
);

this.colorPickerDropdown.instance.left = e.clientX;
this.colorPickerDropdown.instance.top = e.clientY;

它可以工作，我的组件是动态创建的，但是由于某种原因，当我向其发送样式（上面代码块的最后两行）时，样式不起作用。

已将以下内容添加到动态加载的component.ts（ColorPickerComponent）中：

  left: number;
  top: number;

和.html

   <div class="colorPicker" [ngStyle]="{'left': left}"></div>

在检查控制台时，我在ng-reflect-ng-style="[object Object]" div中看到colorPicker。我想知道这是否意味着它试图设置样式但没有值。

这很奇怪，因为在将[ngStyle]放入值时，例如：[ngStyle]="{'left': '100px'}"。

，当console.logging left和top时，我得到了想要的值。

有人可以建议我需要做些什么才能使可变样式发挥作用吗？

谢谢！

Answer 1

使用clientX时，该值只是一个数字，并且缺少诸如px之类的单位。

相反，您应该

this.colorPickerDropdown.instance.left = e.clientX + 'px';
this.colorPickerDropdown.instance.top = e.clientY + 'px';

并将类型更改为string

Angular 2+ |动态创建的组件样式不起作用。 ng-reflect-ng-style =“ [object Object]”

1 个答案: