如何应用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必然相应地更新。