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

您好，我使用这个git为我的项目启用暗模式

它可以工作，但我想把切换按钮放在页面中，而不是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>

黑暗主题就是这样

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>

所以这是可行的。如果它可以工作，但只在页面中，而不是整个项目都变暗，只有我设置了切换的页面。所以我认为我必须将参数传递给app.component.ts

我已经添加了一个新的全球服务

global.service.ts

   import {BehaviorSubject} from "rxjs";

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

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;

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

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

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

---

您可以设置行为主题以跟踪此切换。像这样做

在组件html文件中

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

新服务文件global.service.ts

   import {BehaviorSubject} from "rxjs";

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

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;

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

---

使用此功能，您可以在任何位置将暗模式切换添加到多个组件。

我已进行了更新，以便显示我所做的操作。没有错误，但当更改toggle nothing Happens时，请在app.component.ts中放置断点，并查看当您这样切换时，

this.dark

值是否更新。globalSrvc.darkModeToggleState.subscribe（值=>{this.dark=value；console.log（value）；}）；返回false，当toggle返回UndefinedHanks man时，它现在工作。对于未来提到车坛的答案工程！！！