从暗模式将参数从页面传递到 app.component

Question

您好，我使用这个 git 为我的项目启用暗模式。 https://github.com/ionic-team/ionic-conference-app

它可以工作，但我想将切换按钮放在页面中而不是 app.component.html

深色主题就是这样工作的。

1. app.component.html 中的切换按钮

      <ion-app [class.dark-theme]="dark">
        <ion-split-pane contentId="main-content">
          <ion-item>
           <ion-icon slot="start" name="moon-outline"></ion-icon>
           <ion-label>
             Dark Mode
           </ion-label>
          <ion-toggle [(ngModel)]="dark"></ion-toggle>
          </ion-item>
        </ion-split-pane>
      </ion-app>
   

2. 将dark参数设置为false，以便在切换时改变

        export class AppComponent implements OnInit {
        dark = false;
   
         constructor(
   

所以这行得通。如果它有效，但仅在页面中，而不是整个项目在黑暗中只有我设置切换的页面。所以我认为我必须将参数传递给 app.component.ts？

我添加了一个新服务 Global Service

global.service.ts

   import {BehaviorSubject} from "rxjs";

    export class GlobalService {
       public darkModeToggleState = new BehaviorSubject(false);
       constructor(){}
     }

app.component.ts

      import { GlobalService } from './services/global.service/global.service';

      @Component({
       selector: 'app-root',
       templateUrl: 'app.component.html',
       styleUrls: ['app.component.scss'],
       providers: [GlobalService],
      })
      export class AppComponent implements OnInit {

      dark;

app.component.html 将类更改为深色

      <ion-app [class.dark-theme]="dark">
        <ion-router-outlet></ion-router-outlet>
       </ion-app>

somepage.html

      <ion-toggle *ngIf="index === 5" [(ngModel)]="dark" (ionChange)="darkToggled($event)"></ion-toggle>
  

somepage.ts

       import { GlobalService } from '../../services/global.service/global.service';
        
     constructor(){}

      darkToggled(event){
        this.globalSrvc.darkModeToggleState.next(event.target.chacked)
      }

Answer 1

您可以设置 BehaviourSubject 来跟踪此切换。这样做。

在你的组件 html 文件中

<ion-toggle [(ngModel)]="dark" (ionChange)="darkToggled($event)"></ion-toggle>

在您的组件 .ts 文件中

constructot(private globalSrvc:GlobalService){}
darkToggled(event){
   this.globalSrvc.darkModeToggleState.next(event.target.checked)
}

新的服务文件，global.service.ts

export class GlobalService {
     public darkModeToggleState = new BehaviorSubject(false);
     constructor(){}
}

在您的 app.component.ts 中

dark;
constructor(private globalSrvc:GlobalService){
   this.globalSrvc.darkModeToggleState.subscribe(value=>{
       this.dark = value
   }
}

有了这个，你可以在任何地方为多个组件添加暗模式切换。