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 수 있도록이 응용 프로그램에서 모든 곳에서 <material-toggle>를 넣을 수 있습니다

directives: [DarkThemeDirective] 

에 나열되어, 당신은 단지 값 *ngIf가 바인딩되어 있는지 확인해야 그에 따라 업데이트됩니다.