Применение стилей к модальному NgBootstrap в Angular во время выполнения
У меня есть приложение, которое может поменять тему во время выполнения.
BaseComponent - это мой основной компонент, который добавляется в мой AppComponent и имеет свойство темы (по сути, просто класс, применяемый к одному из элементов обертки), например, так:
В base.component.html
...
<div [ngClass]="theme" class="theme-container">
<!-- other components of application here -->
</div>
...
Последняя проблема, которую я должен решить с помощью своего кода темы, - это стилизация моделей Bootstrap, которые добавляются к моему приложению во время выполнения, и, поскольку класс для моей темы применяется только к моему BaseComponent, очевидно, что стили не применяются к модалу.
Например, скажем, у меня есть Темная тема и Светлая тема, типичный сценарий. Как я могу применить такой стиль к модальному, где его содержимое добавлено в тело моего приложения?
1 ответ
ngb-modal-window будет вставлен в <body> тег, так что вы должны добавить свой класс CSS класса к тегу тела, используя угловой renderer
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
theme = "my-theme";
constructor(private renderer: Renderer2) {
this.renderer.addClass(document.body, this.theme);
}
}