angular - 如何在 ionic 3/angular 中动态添加 [ngStyle] 指令

Question

这就是我所拥有的并且它正在工作，它绑定(bind)到 progress 方法并且它显示正确:

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

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

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

但我似乎找不到将进度方法绑定(bind)到我动态创建的元素的方法。

代码使用 renderer正如@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()+'%');
}