Установите общий фон для всех компонентов в Angular 6
Я пытаюсь получить фон (состоящий из изображения и цвета) для всех компонентов и поместил для него код в styles.css. Он отображается на главной странице AppComponent, но любые другие компоненты, которые визуализируются, появляются поверх него и покрывают фон собственным белым фоном. Итак, сейчас я применяю фон к каждому компоненту и корректирую положение сверху.
Есть ли более простой и эффективный способ сделать это?
Вот часть кода CSS, который я применяю в своих компонентах.
a.component.css
.bg {
background: rgba(240, 240, 240, 1) url('src/assets/images/background.png');
background-repeat: no-repeat;
background-position: 60% -312px;
background-size: 2874px 818px;
}
b.component.css
.bg {
background: rgba(240, 240, 240, 1) url('src/assets/images/background.png');
background-repeat: no-repeat;
background-position: 60% -482px;
background-size: 2874px 818px;
}
@JacopoSciampi У меня есть, но каждый компонент перекрывает фон и покрывает его. Кроме того, поскольку есть разные компоненты, расположенные друг над другом и ниже друг друга, мне нужно отрегулировать положение по высоте для каждого из них.
Попробуйте @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None }). С ViewEncapsultion.None добавление правил в файл CSS, привязанный к компоненту, эквивалентно добавлению тех же правил в глобальный файл styles.css.
@JacopoSciampi Хорошо, я попробовал, и это сработало. Поэтому я должен поместить фоновый класс в каждый компонент html и просто настроить высоту в css компонента, при этом все остальные свойства будут извлечены из styles.css, верно? Кстати, спасибо за ответ.
@AkashSrivastav Ага, это поможет!
@JacopoSciampi Итак, нет ли способа, при котором мне не нужно было бы помещать его в каждый компонент html и регулировать высоту? Есть ли способ заставить их не скрывать bg?
Что ж, вы можете динамически назначать bg-position с помощью ngStyle, но поскольку каждый компонент имеет свою собственную позицию, я считаю, что вам нужно вычислить его для каждого компонента через .ts.
Ответы 1
Если вы создаете приложение узла, в этом случае вы можете просто установить фон для своего файла main.handlebars. А другие страницы будут отображать его из основного вида макета.
будет выглядеть примерно так:
<html>
<head>
<style>background-color: #color_id</style>
</head>
<body>
{{{body}}}
</body>
</html>
Вы можете поместить этот CSS в общий
style.css, чтобы каждый компонент просматривал этот файл, чтобы найти его конфигурацию.