Как динамически добавить директиву [ngStyle] в ionic 3 / angular

Question

Это то, что у меня было, и оно работало, оно было привязано к методу progress и отображалось правильно:

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

Теперь мне нужно создать элемент динамически:

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

но я не могу найти способ привязать метод прогресса к моему динамически созданному элементу.

Код с использованием рендерера , как предложено @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

Вы не должны обрабатывать DOM самостоятельно (а добавление элемента - это).

Даже при использовании рендерера вам следует избегать этого.

Я бы предложил использовать привязку событий и данных к жестко закодированному элементу, как вы делали это в первый раз.

И если вам действительно нужно создать div по каким-либо причинам, то, пожалуйста, объясните нам, чего вы хотели бы достичь, потому что, вероятно, для вас есть решение, которое не предполагает касания DOM самостоятельно.

Answer 2

Как сказал Трише, вы не должны напрямую обращаться к DOM.На самом деле, он не только не рекомендуется, но и не будет работать для динамических изменений, поскольку он больше не работает внутри угловой зоны.

Что вам нужно сделать:

1. createновый заполнитель в вашем текущем компоненте, который будет содержать (2)
2. , создать новую директиву, отвечающую за прослушивание и обработку событий, а также отрисовку любых изменений стиля
3. использование ComponentFactoryResolver для динамического внедрения (2) в (1)

Дополнительные сведения см. На странице Angular Страница динамической загрузки компонентов Angular , на которой представлен действующий пример чего-то похожего на то, что вам нужно

Answer 3

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