Как применить тумблер между светлой и темной темой в AngularDart?

Question

Я хочу применить переключатель между темной и светлой темой в AngularDart.

app_component

<material-icon icon="brightness_2" 
               class="material-list-item-primary"
               aria-hidden="true"></material-icon>
Dark Theme
<span class="material-list-item-secondary">
<material-toggle [checked]="dark" label="Off">
</material-toggle>
</span>

app_component.dart

class LayoutComponent {
  bool dark = false;
 }

Answer 1

Я не пробовал, но я думаю, что это способ сделать это. Оберните содержимое своих приложений в компонент, отличный от корневого компонента, и используйте *ngIf включить темную или не темную версию.

Это уничтожит и воссоздает все компоненты. Поэтому сохранение статуса приложения в глобальных сервисах может быть хорошей идеей.

app_component.html

<material-toggle [checked]="dark" label="Off"></material-toggle>    
<my-app-inner *ngIf="!dark"></my-app-inner>
<my-app-inner *ngIf="dark" darkTheme></my-app-inner>

обеспечивать DarkThemeDirective указан в

directives: [DarkThemeDirective]

Вы можете поставить <material-toggle> везде в вашем приложении, вам просто нужно убедиться, что значение *ngIf обновляется соответственно.