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

Question

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

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

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

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

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

代码使用 renderer as suggested by @fatemefazli which doesn't have change detection so it doesn't render when data becomes available nor listens to change of progress method: 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，请向我们解释您想要实现的目标，因为可能有一个不涉及触摸 [=] 的解决方案。 19=] 你自己。

Answer 3

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

您需要做的是：

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

在 Angular 的页面 Angular's Dynamic Component Load page, in which they present a running example 上查看更多与您需要的内容类似的详细信息

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

How to add [ngStyle] directive dynamically in ionic 3 / angular

ionic-framework

angular-directive

ionic3

angular