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

作为演示，我进行了这个堆叠闪电战：https://stackblitz.com/edit/angular-hdpuvc

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

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

1 个答案:

用法