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>

确保{/ 1>列在

中

DarkThemeDirective

您可以将directives: [DarkThemeDirective]放在应用程序的任何位置，只需要确保绑定的值<material-toggle>会相应更新。

如何在AngularDart中的浅色和深色主题之间应用切换开关

1 个答案: