Angular - 如何创建全局函数？

Question

我刚开始学习 Angular，它似乎与我学习的第一个 JS 框架/库 React 有点不同。

这周我看了一些课程，我想我应该写一些代码，看看它能让我走多远，测试我学到的东西。 您可能会认出该应用程序，因为它是 Frontend Mentor 上列出的挑战之一，我已经在 React 中完成了这项工作，因此我也想在 Angular 中试一试。

这是我到目前为止所做的。 https://i.imgur.com/HbrndxR.png

Atm，我没有从 API 获取数据，因为我还不知道如何。 但是，我想做的是：

1. 当我单击 Light 按钮时，主题应该切换到 Dark，反之亦然。 我为此创建了一个服务。

export class ThemeService {
  isLightTheme:boolean = true;

  changeTheme():void {
    this.isLightTheme = !this.isLightTheme;
  }
}

我所做的是将标题中的按钮链接到 changeTheme() 函数

TS

  changeTheme():void {
    this.themeService.changeTheme();
    this.isLightTheme = this.themeService.isLightTheme;    
  }

HTML

<button (click)="changeTheme()">...</button>

但我不知道如何监听服务中这个 isLightTheme 属性的变化，并将其应用到需要知道应用哪个主题的其他组件。

2. 如何创建在搜索输入中输入内容时过滤国家/地区卡片的功能？ 还有服务？ 我应该如何链接两个不同的组件（搜索输入是一个组件，卡片容器是一个不同的输入）？ 观测值？

Answer 1

最好的方法是使用 rxjs 库中的 BehaviourSubject

代码如下所示：

export class ThemeService {

  public isLightTheme: BehaviorSubject<boolean> = new BehaviorSubject(true);

  changeTheme():void {
    this.isLightTheme.next(!this.isLightTheme.getValue());
  }
}

然后，在你的组件中，你可以像这样订阅 isLightTheme 的值：

themeService.isLightTheme.subscribe(val=>{
   //do something with val
});

Answer 2

Q1：可以使用localStorage。

设置值：

localStorage.setItem("isLightTheme",true);

获得价值

this.isLightTheme = localStorage.getItem("isLightTheme");

参考文献 1 参考文献 2

Q2：您可以使用 HTMLElement 隐藏 div（我假设您正在为国家/地区卡片 div 分配一个 id）。

(<HTMLElement>document.getElementById('your-div-id')).<attribute-to-change>= newValue;

参考文献 3

Answer 3

方案一：最好的办法是使用NgRX状态管理来存储这类信息。 可以在应用程序的其他部分共享。 一个地方的任何更新都可以一次更新整个应用程序。

解决方案2：使用@Input 和@Output 装饰器在组件之间共享信息，
你可以在这里看到一个例子https://indepth.dev/posts/1218/lets-implement-a-theme-switch-like-the-angular-material-site