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