MDL и Angular2 2.0.0-rc.1

Question

Я борюсь за получение Material Design Lite (MDL) для работы с версией Angular2 2.0.0-rc.1, в частности с динамическим контентом.

У меня есть два компонента, один из которых является основным компонентом приложения, который включает в себя второй. Я могу поместить HTML в шаблон основного компонента, использовать классы MDL, иметь компонент implement OnInit и позвонить componentHandler.upgradeDom() оттуда. Все HTML, добавленные до сих пор, теперь зарегистрированы в MDL.

Однако, когда у меня есть второй компонент, используйте service и динамически добавляйте результат в свой шаблон, то этот материал не зарегистрирован первым componentHandler.upgradeDom(). Я не понимаю, почему вызов componentHandler.upgradeDom() со второго компонента после добавления динамического содержимого тоже не работает. Я подумал, что нужно. Использует ли он другой componentHandler или что-то в этом роде?

Еще одна идея состояла бы в том, чтобы второй компонент каким-то образом вызывал функцию первого компонента, чтобы сообщить ему использовать его componentHandler и обновить DOM оттуда, но я не знаю, как это сделать.

Для тестовых целей я добавил собственный Javascript-файл, который вызывает тот же самый, и кнопка запускает его - это работает.

Я нашел несколько директив на StackOverflow, которые, предположительно, автоматически регистрируют все новые HTML, но ни одна из них не работает для меня. Кто-нибудь знает, как это сделать для этой версии Angular2?

Answer 1

К сожалению, ответ У.Ш. не помог мне.

Моя ошибка была очень специфичной для моего проекта. Я добавлял динамический контент и рассказывал componentHandler.upgradeDom();, но он не работал для контента, который был не видно в этот момент из-за того, что CSS установил его на opacity: 0; max-height: 0. Это верно для моего проекта, который изменит эти настройки одним щелчком, чтобы сделать их видимыми для пользователя. По-видимому, именно поэтому он был проигнорирован для функции upgradeDom().

Я добавил ту же функцию в другом месте в моем коде - в основном, когда я загружаю содержимое, я устанавливал логическое значение в значение true, указывающее, что оно изменилось. Когда пользователь делает видимым такую ​​скрытую часть и что логическое значение true, тогда функция вызывается и значение boolean равно false, поэтому оно не происходит каждый раз.

Возможно, кто-то еще находится в том же месте. Это, конечно, не самое приятное решение, нужно проверять эти вещи и многое другое, но эй, это работает.

Редактировать На самом деле я не 100% положительным это было потому, что содержание в вопросе было скрытым, может быть, я просто вызовом функции слишком рано. Возможно, это тоже нужно проверить.

Answer 2

Я использую директиву нашел здесь, чтобы позвонить componentHandler.upgradeAllRegistered();: https://stackoverflow.com/a/35451821/1341825

Для того, чтобы получить компонент CSS для работы, необходимо также установить encapsulation:ViewEncapsulation.None на компоненте (сделать import {Component, ViewEncapsulation} from '@angular/core';)

Вы можете также необходимо ввести ElementRef в компонент, а затем явно вызвать на нем componentHandler.upgradeElement. (Это не работает для меня, но я видел, что это работает в некоторых примерах.) Оформление заказа:

• https://gist.github.com/tbassetto/fa36518660cfcc7e0b62
• https://stackoverflow.com/a/35217588/1341825.