Angular 5 - Директива ngClass и ngStyle innerHTML
Я пытаюсь динамически изменить стиль / класс директивы. По какой-то причине angular не создает привязку, когда я меняю innerHTML с помощью ngStyle или ngClass. В конце концов, я бы хотел, чтобы где бы я ни разместил эту директиву, я хочу, чтобы цвет фона обновлялся на основе служебной переменной. Для простоты я создал пример, который даже не отображает мой жестко закодированный фоновый цвет ngStyle.
В этом примере у меня есть простая директива, выполняющая это, которую я загружаю в компонент приложения. Я не понимаю, почему эта линия не делает цвет фона зеленым.
this.element.nativeElement.innerHTML = `<div [ngStyle] = "{'background-color': 'green'}"> BG Color should be green. But its not. `;
Вот стекблиц:
https://stackblitz.com/edit/angular-xcgnmh
Что мне не хватает? Или есть лучший способ сделать это? Я пробовал использовать выходы, смотрел эмиттеры событий, но они не помогли.
Ответы 1
Я думаю, что вы ищете @HostBinding. Рабочий пример здесь: https://stackblitz.com/edit/angular-nzngy5?file=app/bgcolor.directive.ts. Случайная запись в блоге на тему здесь.
Используется как:
@HostBinding('style.background-color') color: string = 'green';
Больше информации:
Я не верю, что angular знает о ручных изменениях innerHTML. Я думаю, вы пытаетесь создать специальную директиву, которая сама автоматически добавляет и настраивает директиву ngStyle. Хотя это возможно, сделать это сейчас непросто (есть по крайней мере одна открытая проблема, хотя я не могу сразу ее найти). Более серьезная проблема заключается в том, что я думаю, что ваша стратегия реализации вызовет проблемы, если вы когда-нибудь добавите в компонент как отдельную директиву ngStyle, так и свою настраиваемую директиву. Это также просто огромный перебор по сравнению с правильным решением связывания хоста.
Кроме того, к сведению: в angular вы всегда должны избегать прямого использования ElementRef. Это может вызвать проблемы, если вы используете предварительную компиляцию, рендеринг на стороне сервера или множество других технологий, которые не выполняются в браузере. Angular также не знает об этих изменениях (помимо привязки к хосту, еще один способ «более низкого уровня» вручную обновить стиль элемента, не прибегая к ElementRef, - это использовать Renderer2 или, вскоре, renderer3. Эти методы дружественны к SSR).
Глядя на ваш код, я думаю, что есть еще кое-что, чего вы не знаете, чем осознаете. Я настоятельно рекомендую вам ознакомиться с наблюдаемыми объектами, так как они решат именно эту вашу проблему, и что вы проработаете базовые руководства на angular.io. Вот рабочая версия вашего проекта: stackblitz.com/edit/angular-jtmfav?file=app/app.component.ts
Ваша основная проблема в том, что this.color = this.testService.backgroundColor выполняется только один раз во время инициализации директивы. Если позже this.testService.backgroundColor обновляется до нового значения, this.color не обновляется автоматически. JavaScript так не работает. Следовательно, вам нужны наблюдаемые.
Я также должен сказать, что под «ознакомлением с наблюдаемыми» я имею в виду просто пройти обучение на angular.io. О наблюдаемых можно многому научиться, и это может быть ошеломляющим. Вам не нужно много знать. Я все еще не думаю, что знаю очень много. Angular.io должен направить вас на правильный путь.
Привет, спасибо. Я знал, почему мой пример не работает, но не знал, как это сделать. Я знаю основы наблюдаемых объектов, так как использую их в основном для HTTP-запросов, однако для таких случаев я нечасто их использовал. Вы правы, они сложные, но очень мощные. Я определенно пройду через несколько уроков и попытаюсь понять это лучше. Этот пример, который вы сделали, мне очень помогает. Я очень ценю помощь!
Если вам нужно создать свой собственный наблюдаемый объект для хранения значения (не включая что-то вроде of() или timer()), используйте Subject или BehaviorSubject. BehaviorSubject создается с начальным значением, всегда будет помнить свое «текущее значение», и все, что подписывается на него, также немедленно получает текущее значение. Subject не имеет начального значения, не имеет «текущего значения», и все, что подписывается на него, получает значение только тогда, когда выдается новое значение.
Привет, спасибо за информацию. Если бы я пошел по этому пути, как бы я мог привязать значение к службе. Вот обновленная ссылка на то, что я пытаюсь сделать. Я хочу иметь возможность использовать эту директиву во всем моем приложении и изменять значение при изменении значения моей службы. stackblitz.com/edit/angular-gnqdzt?file=app/…