Как динамически добавить директиву [ngStyle] в ionic 3 / angular
Это то, что у меня было, и он работал, он был привязан к методу 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));
}
Я попытался создать публикующий / эмиттер события, но у меня нет триггера для его публикации.
Я реализовал это с помощью шаблона, как вы говорите, но новые требования / реализация требуют динамического создания элемента, я знаю, что это звучит немного слишком сложно из-за отсутствия информации об общей картине, но это единственный вариант, который у меня есть сейчас. Спасибо за комментарий.
angular имеет встроенную поддержку жестов от hammerjs: material.angular.io/guide/…, и даже если этого не произошло, нет необходимости создавать элемент динамически. Вы можете просто получить ссылку на элемент из шаблона и добавить к нему жест в компоненте.
Ответы 3
constructor(public el: ElementRef, public renderer: Renderer){
this.myDiv = <HTMLElement>(document.createElement('div'));
renderer.setElementStyle(this.myDiv , 'width', this.progress()+'%');
}
Спасибо, попробовал, но выдает ошибку о том, что данные, которые используются в процессе, не определены при рендеринге шаблона. Первоначально он отображал Can not find "renderer", и я использовал его как this.render.setElementStyle ....
После обхода и добавления его только после того, как данные будут доступны, я получаю: TypeError: undefined не является объектом (оценка 'el.style')
@ Август, пожалуйста, опубликуйте свой полный код или прогресс? Я пробовал, этот код работал в простом состоянии, возможно, ваш другой.
Хотя это может дать ответ на вопрос, лучше включить некоторое описание того, как этот ответ помогает решить проблему. Пожалуйста, прочтите Как мне написать хороший ответ?.
Я думаю, что проблема возникает из-за разницы между директивой style (используемой в этом ответе), которая является директивой HTML, привязанной к значению, и NgStyle (используемой в моей предыдущей реализации), которая является директивой Angular, которая «слушает» наличие данные с течением времени.
Реализовано, но не делает того же, что и NgStyle: не отображается, когда значения становятся доступными, и значение не обновляется постоянно, как при использовании с NgStyle. См. Мой предыдущий комментарий.
@ Август, может быть, вы правы, я сделал stackblitz, проверьте его в консоли и внесите ваши изменения, мне было бы полезно понять,
@fatemefazli Спасибо за попытку помочь, вот случай получше: stackblitz.com/edit/angular-fpyfmn?embed=1&file=app/…
@August, да, теперь я понимаю, вы правы, я не смог найти способ динамически изменять стиль, способ - установить функцию ElementStyle в процессе выполнения, когда вы хотите ее обновить. спасибо за хороший вопрос.
@fatemefazli Благодарю вас за попытку помочь, ваше решение - верный аргумент, но не в моем случае.
Вы не должны самостоятельно обрабатывать изменение DOM (и добавление элемента).
Даже при использовании средства визуализации этого следует избегать.
Я бы посоветовал использовать привязку событий и данных к жестко запрограммированному элементу, как вы это сделали в первый раз.
И если вам действительно нужно создать div по каким-либо причинам, тогда, пожалуйста, объясните нам, чего вы хотите достичь, потому что, вероятно, для вас есть решение, которое не связано с самим прикосновением к DOM.
Как сказал TricheTriche, вы не должны напрямую обращаться к DOM. Фактически, это не только не рекомендуется, но и не будет работать для динамических изменений, поскольку на самом деле это больше не выполняется внутри угловой зоны.
Что вам нужно сделать:
- создайте новый заполнитель в вашем текущем компоненте, который будет размещать (2)
- создать новую директиву, отвечающую за прослушивание и обработку событий, а также за рендеринг любых изменений стиля
- используйте ComponentFactoryResolver для динамического внедрения (2) в (1)
Ознакомьтесь с более подробной информацией на странице Angular Страница загрузки динамических компонентов Angular, на которой они представляют работающий пример чего-то похожего на то, что вам нужно.
Не прямой ответ, но разве вы не можете добиться того же, используя
*ngIfвместо динамического создания элемента?