Comment puis-je appliquer l'interrupteur à bascule entre le thème clair et sombre dans AngularDart

Question

Je veux appliquer une bascule entre le thème sombre et clair dans 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

Je ne l'ai pas essayé, mais je pense que c'est la façon de le faire. Enveloppez le contenu de votre application dans un composant différent de votre composant racine et utilisez *ngIf pour activer la version sombre ou non sombre.

Cela va détruire et recréer tous les composants. Par conséquent, conserver le statut de l'application dans les services globaux peut être une bonne idée.

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> 

assurer DarkThemeDirective est listé dans

directives: [DarkThemeDirective] 

Vous pouvez mettre le <material-toggle> partout dans votre application, il vous suffit de faire en sorte que la valeur est liée à *ngIf est mis à jour en conséquence.