如何在离子3 /角度中动态添加[ngStyle]指令

Question

这就是我所拥有的并且它正在工作，它与progress方法有关并且它正确显示：

<div [ngStyle]="{'width.%': progress()}"></div>

现在我必须动态创建元素：

let myDiv = <HTMLElement>(document.createElement('div'));

但我似乎无法找到一种方法将progress方法绑定到我动态创建的元素。

使用@fatemefazli建议的渲染器代码，它没有变化检测，因此当数据可用时它不会渲染，也不会监听进度变化方法： https ： //stackblitz.com/edit/angular-fpyfmn

动态创建DOM元素的决定来自于使用HammerJS附加平移手势的需要，这需要像这样附加一个监听器：

addGestures(elem){
    var hammer = new Gesture(elem);
    hammer.listen();

    hammer.on('pan', (e) => this.Pan(e));
  }

我试图创建一个事件发布/发射器，但我没有触发器来发布它。

Answer 1

constructor(public el: ElementRef, public renderer: Renderer){
    this.myDiv = <HTMLElement>(document.createElement('div'));
    renderer.setElementStyle(this.myDiv , 'width', this.progress()+'%');
}

Answer 2

您不应该自己处理DOM更改（并添加元素）。

即使使用渲染器，这也是您想要避免的。

我建议的是在硬编码元素上使用事件和数据绑定，就像你第一次做的那样。

如果你真的需要出于任何原因创建一个div，那么请向我们解释你想要实现的目标，因为可能有一个解决方案，不涉及自己触摸DOM。

Answer 3

正如TricheTriche所说，你不应该直接访问DOM。 事实上，不仅不推荐它，而且不适用于动态变化，因为它不再真正在角度区域内运行。

你需要做的是：

1. 在当前组件中创建一个将占用的新占位符（2）
2. 创建一个新指令，负责监听和处理事件，并渲染任何样式更改
3. 使用ComponentFactoryResolver动态注入（2）到（1）

查看Angular的页面Angular的动态组件加载页面的更多细节，其中它们提供了类似于您需要的类似的运行示例