Угловые элементы: зависимость от материала

Я создаю элемент Angular для использования в других проектах. Элемент представляет собой компонент, содержащий компоненты Angular Material в своем шаблоне, поэтому в конечном итоге мой элемент требует, чтобы страница ‹связывала› файл CSS темы материала (а также значки материалов и файлы шрифтов материалов, а тег link может отображаться только в <head> документа). ).

Было бы здорово сказать, что все, что нужно, это позвонить platformBrowser().bootstrapModuleFactory(...) и написать <some-custom-element> на странице без дальнейших инструкций. Это возможно?

Допустимо ли требовать от пользователей моего пользовательского элемента ссылки на все эти файлы CSS в <head> своей страницы? Я предполагаю, что с этим шаблоном добавление новых зависимостей позже не будет обратно совместимым изменением, и мне придется сказать всем добавить новые файлы CSS или создать новый пользовательский элемент.


angular angular-material angular-elements
person Alexander Taylor    schedule 04.07.2018    source источник
comment
Вы нашли способ упаковать Angular Material с Angular Element?   -  person dev7    schedule 04.09.2018
comment
у меня нет. Я по-прежнему требую, чтобы пользователи сами включали материальную тему.   -  person Alexander Taylor    schedule 09.09.2018
comment
Я не знаю, сталкивались ли вы с проблемой с угловым компонентом, когда используете свой веб-компонент в другом проекте. Я столкнулся с большой проблемой, например, мне нужно вызвать ChangeDetection, чтобы компонент прослушивал проблему изменения или стиля с помощью mat-select и mat-table. столько бед. Не уверен, что вы их завоевали.   -  person Johnathan Li    schedule 11.03.2020

Ответы (2)


arrow_upward
2
arrow_downward

Возможно, вам потребуется установить инкапсуляцию компонента на ViewEncapsulation.None.

@Component({
    selector: 'pay-button',
    templateUrl: './pay-button.component.html',
    styleUrls: ['./pay-button.component.scss'], //include material related css here
    encapsulation: ViewEncapsulation.Native
})
person Kyle Snell    schedule 08.09.2018
comment
Это может сработать, но что, если у них уже есть тема Material для своего приложения? - person Alexander Taylor; 09.09.2018
comment
Хороший вопрос @AlexanderTaylor. Мне удалось применить все стили материалов (закусочная, кнопки, элементы формы и т. д.) с инкапсуляцией собственного представления, включив все связанные стили непосредственно в файл scss для конкретного компонента. Обновил мой ответ. - person Kyle Snell; 10.09.2018
comment
У вас есть пример? Для меня немного сложно получить тему с угловым и угловым материалом версии 7.x. Такие компоненты, как средство выбора даты, вообще не имеют стиля. заранее спасибо - person Thomas Zoé; 13.02.2019

arrow_upward
1
arrow_downward

Я смог использовать значки Mat, просто импортировав семейство шрифтов в файл src/styles.scss.

@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

person Simon Hansen    schedule 29.03.2019