Использование разных таблиц стилей для разных компонентов в Angular 4/5/6/7

Question

В моем проекте 3 встроенных шаблона: один используется для целевой страницы, второй - для форм, а третий - для шаблона панели администратора.Все эти 3 шаблона поставляются с их конкретными css / js / images.

Я хочу привязать эти таблицы стилей к одному компоненту, например

• для компонента целевой страницы. Используются только таблицы стилей из assets / landing_page
• для компонента страницы только используемоготаблицы стилей взяты из активов / формы

и

• для компонента admin-dashboard. Используемые только таблицы стилей взяты из активов / dashboard

Подход IСейчас я использую импорт всех таблиц стилей в стилях массива CLI и файлов сценариев в массиве js.Из-за этого все стили перекрываются, так как стиль кнопки для целевой страницы применяется ко всем другим типам кнопок.

помогите мне из этого

Answer 1

Я вижу, что проблема будет только с CSS.JS & images зависит от вас, когда позвонить.Поэтому для исправления проблемы css вы можете сделать что-то вроде ниже.

В компоненте целевой страницы в @component decorator добавьте свойство styleUrls: ['<path_of_landing_page_css_file>'], которое будет выглядеть примерно так:

@Component({ selector: 'landing-page.component', templateUrl: './landing-page.component.html', styleUrls: ['./landing-page.component.css','<path_of_landing_page_css_file_from_assests>',...], })

как то для остальной части вашего компонента.И убедитесь, что удалили эту ссылку импорта CSS из массива CLI.

Answer 2

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

т. Е. Поместите вашиings_page.html, landing_page.ts и landing_page.css в одну папкуЦены_страницы.

Теперь вы можете импортировать файл CSS в свой компонент и использовать ViewEncapsulation, чтобы ограничить стили

Угловая документация для справки: https://angular.io/api/core/ViewEncapsulation