Angular 将布尔值从服务链接到多个组件

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

在服务层中，我首先导入

import { Observable, of } from 'rxjs';

在服务中，我得到了

modifyToggle: boolean = false;

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

当我在我的子组件中更改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));
  }
}

---

---

作为演示，我制作了这个stackblitz:

您应该使用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));
  }
}

---

这是一个示例演示-

“出了问题”可能会继续。1。你能发布服务文件的完整代码吗？2.使用的

将返回一个只有1个值的可观察值，并将立即完成。因此，考虑使用<代码>主题<代码>追踪<代码>修改FutyToGruts更改，或者更好地使用状态管理系统，如果您的应用程序足够复杂，就需要它。@ Tr1ET添加了完整的服务，就像您所说的，服务看起来是合法的。完整的错误呢？
非法返回语句
是IDE错误吗？不是问题的直接答案，但您可能希望使用NGRX（例如，请参阅）。不过，对于小型应用程序来说，这可能有些过头了…-）将我的服务更改为您的代码，然后在我的组件中调用以下代码：（但仍然得到相同的错误）modifyLine:boolean；构造函数（private reportLinkService:reportLinkService）{this.reportLinkService.getModifyToggle（）.subscribe（toggle=>this.modifyLine=toggle）；}用
this.reportLinkService.getModifyToggle（）.subscribe（value=>console.log（“toggle value”，value））更新了答案
所以我看不出在这个函数调用中链接子函数中的变量有什么问题<代码>this.reportLinkService.getModifyToggle（）.subscribe（toggle=>this.modifyLine=toggle）应该是正确的吗？（它仍然在说
“非法返回语句”
）您在演示中遇到了多个问题：-
modifyToggle
在服务中从未更改。-reportLinkService.getModifyToggle（）仅在启动应用程序时触发一次。此答案会将您设置为正确路径。创建一个行为主题并在按下按钮时调用
next
，您需要将值切换到服务中，这将通知所有其他
订户
。这是你修改过的演示-
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

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));
  }
}

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