Question

你好，我基本上是Angular的新手，在这里我试图从服务访问一个布尔变量。我已经在服务中声明了一个值为true的布尔变量。基于某种逻辑，我将将该服务变量更改为false。我在几个组件中使用的特定变量。因此，我面临的问题是，我分配为true的初始值会传到我使用过的所有组件中，但是更改了未反映在所有组件中的值之后。这样的服务类：

@Injectable()
export class MyService { 
running: boolean = true;
}

组件1：

export class FirstComponent {
  constructor(private myService: MyService) { }
  check(){
  this.myservice.running = false;
  }
}

组件2：

export class SecondComponent implements OnChanges {
      running;
      constructor(private myService: MyService) { }
      ngOnChanges(){
      this.running = this.myService.running;
      console.log('running', this.running);
      }
    }

这就是我将如何更改布尔值并从不同组件中的服务访问的方式。我不确定这是否正确，请纠正我。

Answer 1

一个简单的答案如何？

1）如果您使用的是Angular v6或更高版本，则只需将服务更改为以下内容即可：

@Injectable(providedIn: 'root')
export class MyService { 
   running: boolean = true;
}

2）搜索系统，并确保未在任何模块或组件的MyService数组中列出{strong>未）providers服务。

3）更改组件以使用吸气剂。正如其他人所说，ngOnChanges仅适用于@Input属性。

  export class SecondComponent {
      running;
      constructor(private myService: MyService) { }

      get running(): boolean {
        return this.myService.running;
      }
    }

应该这样做！

当服务中的值更改时，Angular的内置更改检测将获取更改并重新获取值，调用获取方法并将更新后的值提供给模板。

对于这样简单的事情，您不需要不需要Subject或BehaviorSubject。（那些是 waaaay 过度使用的恕我直言。）

我在这里有一个非常简单（和类似）示例：https://stackblitz.com/edit/angular-simpleservice-deborahk

它使用一个字符串，但对于布尔值将完全相同。

Answer 2

您可以在服务中使用data。然后通过BehaviorSubject方法创建一个Observable主题方法，然后在所需的任何组件中订阅该可观察对象。

请注意，asObservable已更改为ngOnChanges。

服务中：

ngOnInit

在第一个组件中：

private runningSubject: BehaviorSubject<boolean> = new BehaviorSubject(true);
running = this.runningSubject.asObservable();

setRunning = (value: boolean) => {
   this.runningSubject.next(value);
}

第二部分：

export class FirstComponent {
  constructor(private myService: MyService) { }
  check(){
      this.myservice.setRunning(false);
  }
}

Answer 3

首先，必须确保服务是单例的，或者在要连接的每个组件的范围内至少只有一个实例。实现此目的最简单的方法是在AppModule内部providers内部注册您的服务，在其他地方。

第二件事是，即使您的服务更改了它的值，ngOnChanges也不会被无故调用。它需要由变更检测器调用，但是服务不会以您尝试使用的方式导致运行变更检测。

相反，您应该与Observable共享此值。

export class TestService {
    private readonly _messageSubject: Subject<boolean>;

    get observable(): Observable<boolean> {
        return this._messageSubject.asObservable();
    }

    constructor() {
        this._messageSubject = new Subject<boolean>();
    }

    sendMessage(value: boolean): void {
        this._messageSubject.next(value);
    }
}

现在，每个注入TestService的组件都可以使用两种方法：

observable这是吸气剂。它从您的服务中返回可观察到的主题。 sendMessage(value: boolean)会将您的布尔消息发送给_messageSubject的每个订阅者。

如果您要订阅该主题（并访问服务价值的每次更改），则需要以这种方式使用服务：

TestService.observable.subscribe(value => { /* You can access your boolean value here with name "value" */});

请注意，Subject具有类似值更改的内容，因此subscribe方法内的回调仅在该值的下一次更改后才执行（这意味着将在每次下一次{{ 1}}方法）。如果要访问以前的值（这意味着调用sendMessage(value: boolean)之前是最新的值），请改用subscribe。

在组件和服务类中处理布尔字段-Angular 2

3 个答案: