#angular #angular-directive #angular-renderer2
Вопрос:
У меня есть директива, которая реализует слайдер при наведении на элемент, Если вы посетите этот сайт , когда вы наводите на изображение директива делает другие изображения абсолютных и позволяет стрелы для раздвижных к следующему изображению, единственная проблема заключается в том, что у меня есть appLazyLoadWithLoading директива, которая загружает изображения, когда они отображаются на странице, а не в десять и добавляет нагрузки до нагрузки и я ищу способ, чтобы добавить директиву создан элементам img.
let img = this.renderer2.createElement('img');
this.renderer2.setAttribute(img, "src", this.thumbnailMaker(element.url));
this.renderer2.setAttribute(img, "alt", element.name);
this.renderer2.setAttribute(img, "title", element.name);
this.renderer2.appendChild(this.el.nativeElement.parentElement, img);
таким образом, добавляется элемент img, но я не могу добавить к нему свою директиву,
попробовал этот способ и $compile, и они не сработали.
this.renderer.setAttribute(img, "appLazyLoadWithLoading", "work please!");
Комментарии:
1. Вы не можете динамически добавлять директивы поверх DOM, на данный момент это невозможно. Одним из возможных решений может быть создание компонента с селектором
[appLazyLoadWithLoading]и преобразование его в угловые элементы. Поэтому, как только вы добавите это в DOM, появится конкретный веб-компонент, созданный с использованием углового элемента. Я не пробовал этого делать, но я верю, что это должно сработать2. @PankajParkar значит, это невозможно сделать ? Может быть, написать тег Img в HTML, а затем добавить его в родительский элемент с помощью Render2 ?
3. Не могли бы вы, пожалуйста, взглянуть на мой последний отредактированный комментарий? Я предложил одно решение, которое должно сработать.
4. @PankajParkar Спасибо, я собираюсь попробовать и сообщить о результате здесь
5. Потрясающе, дай мне знать, как все проходит, спасибо 🙂
Ответ №1:
На данный момент до углового v12 вы не можете динамически добавлять компоненты в DOM.
Решением может быть,
- Создайте компонент с селектором
[appLazyLoadWithLoading] - Преобразуйте этот компонент в угловые элементы.
- Теперь вы можете использовать преобразованные компоненты динамически.
В основном происходит то, что угловой элемент помогает скрыть ваши компоненты в веб-компоненте. Поэтому, когда вы добавляете определенный селектор в DOM, включается конкретный веб-компонент, и вы увидите желаемое поведение в HTML.
Комментарии:
1. Вы можете добавлять компоненты, но не директивы.
2. Косвенно вы можете, компонент с
template: ''(Директива-это компонент без шаблона), но во избежание путаницы позвольте мне сохранить его только как компонент. Спасибо за предупреждение @AviadP.3. Я имею в виду, что вы можете динамически добавлять компоненты, посмотрите на мой ответ и stackblitz — если я не неправильно понимаю ваш смысл
4. @AviadP. да, я видел ваш ответ. Мы можем динамически добавлять компоненты несколькими способами . Я думаю, вы неправильно поняли, в этом случае OP хочет добавить что-то поверх DOM, которое само создается на лету программно, в этом случае это будет невозможно. Я вижу, что угловые элементы-это правильный путь для этого.
5. Я не понимаю, почему добавление компонента с использованием фабрики компонентов не будет работать для OP
Ответ №2:
Это возможно не с помощью Renderer2 , а с помощью динамической загрузки компонентов.
В принципе, вместо создания img html-элемента создайте компонент, который включает в себя img элемент внутри него, с любыми директивами, которые вы хотите, а затем динамически загрузите этот компонент.
Вот пример СтекбЛитца