Question

在Angular 6中，我想从我的服务访问组件的嵌套（局部，在函数内部）变量。

myComponent.ts

myFunction() {
   var componentArray = [];
}

myService.ts

myServiceFunction() {
   if (errorExists) {
      componentArray.push("error exists!"); //how can I do this?
   }
}

这可能吗？我可以引用其他组件的全局属性或功能，但是如何访问这些功能中的局部变量呢？

Answer 1

您可以使用订户模式在服务和组件之间进行通信。

该服务将公开一个可观察的对象，该对象在发生错误时会发出错误消息，并且组件将订阅以接收这些消息。

您必须确定这应该是Subject，BehaviorSubject还是ReplaySubject。根据您的需要，但在这里我只使用一个主题。

@Injectable()
export class MyService {
    private _errors: Subject<string> = new Subject();

    public getErrors(): Observable<string> { 
       return this._errors.asObservable();
    }

    public someFunction() {
       if(errorExists) {
          this._errors.next("error exists");
       }
    }
}

然后，组件将侦听这些错误，并将其添加到数组中。

@Component({...})
export class MyComponent implement OnDestroy, OnInit {
   private componentArray = [];

   private readonly _destroyed$: Subject<void> = new Subject();

   public constructor(private myService: MyService) {}

   public ngOnDestroy() {
      this._destroyed$.next();
      this._destroyed$.complete();
   }

   public ngOnInit() {
       const functionArray = [];

       this.myService.getErrors().pipe(
           takeUntil(this._destroyed$)
       ).subscribe(error => {
           this.componentArray.push(error);
           functionArray.push(error);
       });
   }
}

将值添加到数组后如何使用该值取决于您。如果您修改模板中使用的组件属性，则需要将视图标记为脏，以通知Angular需要进行更改检测。

https://angular.io/api/core/ChangeDetectorRef

从服务中引用组件的嵌套变量，反之亦然

1 个答案: