Angular 中的全局事件

# Angular中的全局事件

typescript
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class GlobalEventService {
  public myEvent: EventEmitter = new EventEmitter();
}

typescript
import { Component, OnInit } from '@angular/core';
import { GlobalEventService } from 'path-to-global-event-service';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
})
export class MyComponent implements OnInit {
  constructor(private globalEventService: GlobalEventService) {}
  ngOnInit(): void {
    // 订阅全局事件
    this.globalEventService.myEvent.subscribe((data) => {
      // 处理全局事件触发后的逻辑
      console.log('Global Event Triggered:', data);
    });
  }
}

typescript
// global-event.service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class GlobalEventService {
  public themeChanged: EventEmitter = new EventEmitter();
}

typescript
// theme-switcher.component.ts
import { Component } from '@angular/core';
import { GlobalEventService } from 'path-to-global-event-service';
@Component({
  selector: 'app-theme-switcher',
  template: `
    Toggle Theme
  `,
})
export class ThemeSwitcherComponent {
  constructor(private globalEventService: GlobalEventService) {}
  toggleTheme() {
    // 切换主题并触发全局事件
    const newTheme = /* 逻辑: 获取新的主题 */;
    this.globalEventService.themeChanged.emit(newTheme);
  }
}

typescript
// themed-component.component.ts
import { Component, HostBinding } from '@angular/core';
import { GlobalEventService } from 'path-to-global-event-service';
@Component({
  selector: 'app-themed-component',
  template: `Themed Component`,
  styles: [
    `
      :host {
        display: block;
        padding: 16px;
        border: 1px solid #ccc;
        background-color: #f0f0f0;
      }
      :host.dark-theme {
        background-color: #333;
        color: #fff;
      }
    `,
  ],
})
export class ThemedComponent {
  @HostBinding('class.dark-theme') isDarkTheme = false;
  constructor(private globalEventService: GlobalEventService) {
    // 订阅主题变化事件
    this.globalEventService.themeChanged.subscribe((newTheme) => {
      this.isDarkTheme = newTheme === 'dark';
    });
  }
}