Question

我有一个可以在运行时替换主题的应用程序。

BaseComponent是添加到AppComponent中的主要组件，并具有主题属性（本质上只是应用于包装元素之一的类），如下所示：

在base.component.html

中

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

我需要用主题代码进行整理的最后一个问题是设置Bootstrap模型的样式，该模型在运行时添加到应用程序的，并且由于主题的类仅应用于我的BaseComponent，因此显然没有样式应用于模式。

例如，假设我有一个深色主题和一个浅色主题，这是一个典型的场景。我该如何将这种样式应用于将其内容添加到应用程序主体中的模式？

Answer 1

ngb-modal-window将插入在<body>标签处，因此您应该使用有角的renderer

将主题css类添加到body标签。

@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);
  }
}

在运行时将样式应用于Angular中的NgBootstrap模态

1 个答案: