angular - 将服务中的布尔值链接到多个组件

Question

为了促进两个子组件之间的通信，我制作了一个服务层。为了检查我是否真的在修改一个项目，或者我是否使用了添加按钮，我在我的服务层中使用了一个布尔值。我这样做是因为添加按钮与修改按钮位于不同的组件中。

在服务层我首先导入

import { Observable, of } from 'rxjs';

在服务本身我有

modifyToggle: boolean = false;

getModifyToggle(): Observable<boolean> {
    return of(this.modifyToggle);
} //returns error: "Illegal return statement"

这个函数出了点问题，我觉得这很奇怪，因为我有类似的代码来返回报告并且工作正常。

在我有的子组件中

modifyLine: boolean;

ngOnInit() {
     this.reportLinkService.getModifyToggle().subscribe(
        toggle => this.modifyLine = toggle
     );
}

当我在我的子组件中更改 modifyLine 时，我希望它在我的服务层中也发生更改，对使用此“modifyToggle”的所有组件进行更改。

---

完整的服务代码是

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

import { Report } from '../../classes/report';
import { LineItem } from '../../classes/lineItem';

@Injectable({
  providedIn: 'root'
})
export class ReportLinkService {

  modifyToggle: boolean = false;
  report: Report;

  constructor() {}

  addLine(lineItem: LineItem): void {
    this.report.lineItems.push(lineItem);
  }

  getReport(): Observable<Report> {
    return of(this.report);
  }

  getDate(): Date {
    return this.report.date;
  }

  deleteLine (lineItem: LineItem ): void {
    this.report.lineItems = this.report.lineItems.filter( line => line !== lineItem);
  }

  reportLine(): void{
    // temp. using this as a checker, will be modified to something useable
    console.log(this.modifyToggle); 
  }

  getModifyToggle():Observable<boolean> {
    return of(this.modifyToggle);
  }

  getReportLine(id: number): Observable<LineItem> {
    return of(this.report.lineItems.find(item => item.id === id));
  }
}

---

没有抛出真正的错误，但是当我调试并传递组件中的订阅函数时，当我检查 modifyLine 的值时，我得到：

message: "Illegal return statement"
stack: "SyntaxError: Illegal return statement   at LineItemComponent.push../src/app/report/line-item/line-item.component.ts.LineItemComponent.ngOnInit (http://localhost:4200/main.js:1010:27)↵    at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.js:63659:19)↵    at checkAndUpdateNodeInline (http://localhost:4200/vendor.js:64923:20)↵    at checkAndUpdateNode (http://localhost:4200/vendor.js:64885:16)↵    at debugCheckAndUpdateNode (http://localhost:4200/vendor.js:65518:38)↵    at debugCheckDirectivesFn (http://localhost:4200/vendor.js:65478:13)↵    at Object.eval [as updateDirectives] (ng:///ReportModule/ReportComponent.ngfactory.js:63:5)↵    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:4200/vendor.js:65470:21)↵    at checkAndUpdateView (http://localhost:4200/vendor.js:64867:14)↵    at callViewAction (http://localhost:4200/vendor.js:65108:21)"
__proto__: Error
constructor: ƒ SyntaxError()
message: ""
name: "SyntaxError"
toString: ƒ toString()
__proto__: Object

---

作为演示，我制作了这个 stackblitz：https ://stackblitz.com/edit/angular-hdpuvc

标签： angularangular6

Answer 1

您应该使用 BehaviorSubject 或 Subject 来实现相同的目标。你的代码应该像 -

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

import { Report } from '../../classes/report';
import { LineItem } from '../../classes/lineItem';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable({
  providedIn: 'root'
})
export class ReportLinkService {

  modifyToggle: boolean = false; //<-- you can remove this.
  report: Report;
    public toggle: BehaviorSubject<boolean> = 
new BehaviorSubject(false);

  constructor() {}

  addLine(lineItem: LineItem): void {
    this.report.lineItems.push(lineItem);
  }

  getReport(): Observable<Report> {
    return of(this.report);
  }

  getDate(): Date {
    return this.report.date;
  }

  deleteLine (lineItem: LineItem ): void {
    this.report.lineItems = this.report.lineItems.filter( line => line !== lineItem);
  }

  reportLine(): void{
    this.toggle.next(true); //<--- you can change the value here.
    // temp. using this as a checker, will be modified to something useable
    console.log(this.modifyToggle); 
  }

  getModifyToggle():Observable<boolean> {
    return this.toggle.asObservable();     //<--- change here
  }

  getReportLine(id: number): Observable<LineItem> {
    return of(this.report.lineItems.find(item => item.id === id));
  }
}

用法

constructor您可以在组件中使用以下语法，例如LineItemComponent

this.reportLinkService.getModifyToggle().subscribe(value=>console.log("toggle value ", value));

这是示例演示 - https://stackblitz.com/edit/angular-ru5jmk