#angular #typescript #templates
#angular #typescript #шаблоны
Вопрос:
Я интегрирую HTML-шаблон в проект angular 7, и он работает некорректно
Я добавил файлы шаблонов в assets/ template / .. и я добавил импорт в angular.json, например:
- «стили»: [«src/assets/template/css/style-customizer.css»,…],
- «скрипты»: [«src/assets/template/js/vendor/modernizr-2.8.3.min.js «,…]
Я отредактировал html-код :
- удалены теги doctype и html
- удалены все заголовки
- удалены все импортируемые css и js
- отредактировал исходники изображений
(например, src=»/assets/template/img/slider/1.jpg » alt=»основной слайдер» title=»#htmlcaption1″)
Я добавил HTML-код в index.html под тегом app-root и все работает нормально
Но когда я меняю его на app.component.html :
- некоторые изображения не отображаются
- некоторые CSS работают некорректно
- и некоторые анимации не работают
и у меня нет никакой ошибки в моей консоли
Комментарии:
1. Смотрите это руководство
2. в видео он загрузил предварительно подготовленный проект angular со встроенной темой, затем он запустил ‘npm install’ для загрузки библиотек, это не то, что мне нужно. у меня уже есть проект, над которым я работаю, и я хочу интегрировать тему html (не тему angular)
3. @HassenTayech. Вы нашли решение своей проблемы?
Ответ №1:
Обычно я не использую массив styles в angular.json, вместо этого я импортирую все глобальные стили в styles .css, поскольку по умолчанию он установлен в массив стилей angular.json.
/* You can add global styles to this file, and also import other style files */
@import "assets/quote.css";
@import "https://fonts.googleapis.com/css?family=IBM Plex Sans Condensed:200|Josefin Sans:300|Julius Sans One|Merriweather Sans:400|Overpass:400|Quicksand"
Ответ №2:
Просто добавьте encapsulation: ViewEncapsulation.None в @component , как указано ниже.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})