Блог

У меня есть приложение angular, которое использует ag-grid (angular 10 и angular material). Я импортировал как темную, так и светлую тему, которую я пытаюсь изменить динамически. мой

style.scss

 @import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine-dark.css";
  

компонент с сеткой (app.component.html )

 <ag-grid-angular
  style="width: 100%; height: 100%;"
  [ngClass]="!isDarkTheme ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>
  

component.ts

 export class AppComponent implements OnInit {
  isDarkTheme: Observable<boolean>;

  constructor(private themeService: ThemeService) { }

  ngOnInit(): void {
    this.isDarkTheme = this.themeService.isDarkTheme;
  }
  

значение isDarkTheme меняется правильно, однако angular применяет только темную тему в обоих случаях. Как мне применить как темную, так и светлую тему в моем приложении.

Вам нужно использовать async канал. Обновите свой код [ngClass] строкой до этого:

 [ngClass]="!(isDarkTheme | async) ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"