Ссылка на вложенную переменную компонента из службы или наоборот

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