Применение стилей к модальному NgBootstrap в Angular во время выполнения - PullRequest
Новая
       18

Применение стилей к модальному NgBootstrap в Angular во время выполнения

0 голосов
/ 03 октября 2018

У меня есть приложение, в котором тема может быть заменена во время выполнения.

BaseComponent - это мой основной компонент, который добавляется в мой AppComponent и имеет свойство темы (которое по сути является просто примененным классом).на одном из элементов обертки), например, так:

В base.component.html 

...
<div [ngClass]="theme" class="theme-container">
    <!-- other components of application here -->
</div>
...

Последняя проблема, с которой мне нужно разобраться с помощью кода тем оформления, - стилизация Bootstrapмодели, которые добавляются к моему приложению во время выполнения, и поскольку класс для моей темы применяется только к моему BaseComponent, очевидно, к модалу не применяются стили.

Например, скажем, у меня есть Darkтема и светлая тема, типичный сценарий.Как я могу применить такой стиль к модальному, где его содержимое добавлено в тело моего приложения?

1 Ответ

0 голосов
/ 04 октября 2018

ngb-modal-window будет вставлено в тег <body>, поэтому вы должны добавить свой класс css theme в тег body, используя угловой 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);
  }
}
...