如何在离子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

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

你需要做的是：

1. 在当前组件中创建一个新的占位符来托管 (2)
2. 创建一个新指令，负责侦听和处理事件，并呈现任何样式更改
3. 使用ComponentFactoryResolver将 (2) 动态注入 (1)

在 Angular 的页面Angular 的动态组件加载页面上查看更多详细信息，其中他们提供了与您需要的类似的运行示例