ANGULAR - подписка в компоненте не обновляет значение из сервиса - PullRequest
Новая
       8

ANGULAR - подписка в компоненте не обновляет значение из сервиса

1 голос
/ 10 апреля 2020

У меня есть заметка в моей службе, на которую я хочу подписаться.

В первый раз возвращается хорошее начальное значение, благодаря BehaviorSubject.

Но когда я обновляю значение с помощью next () в моем сервисе, подписка в моем компоненте не вызывается ...

Это код в моем сервисе: 

    activeDeepView:any = false;
    deepViewStatus: Subject<boolean> = new BehaviorSubject<boolean>(false);

    deepView(){
      this.activeDeepView = !this.activeDeepView;
      this.deepViewStatus.next(this.activeDeepView);
      console.log("deep view status", this.deepViewStatus);
    }

И это код в моем компоненте: 

this.globalFn.deepViewStatus.subscribe(value => {
  console.log(value);
  if(value == true){
    this.renderer.setStyle(this.fsModal.nativeElement,'transition','0.3s ease-out');
    this.renderer.setStyle(this.fsModal.nativeElement,'pointer-events','all');
    this.renderer.setStyle(this.fsModal.nativeElement,'transform','translateY(0px)');
  } else {
    this.renderer.setStyle(this.fsModal.nativeElement,'transition','0.3s ease-out');
    this.renderer.setStyle(this.fsModal.nativeElement,'pointer-events','none');
    this.renderer.setStyle(this.fsModal.nativeElement,'transform','translateY(1000px)');
  }
})

Где моя ошибка? Я буду рад узнать, потому что я пробовал много вещей, и на данный момент ничего не работает ...

Спасибо всем!

Ответы [ 2 ]

1 голос
/ 10 апреля 2020

Вы можете попытаться выставить BehaviorSubject в качестве наблюдаемого. К вашим услугам: 

private deepViewStatus: Subject<boolean> = new BehaviorSubject<boolean>(false);
...
status(): Observable<boolean> {
  return  this.deepViewStatus.asObservable();
}

И тогда вы подпишетесь на свой компонент следующим образом: 

this.yourService.status().subscribe(value => {//your code})

Надеюсь, это поможет

0 голосов
/ 13 апреля 2020

Я даю вам простую архитектуру, которая учитывает принципы POO, реактивного и чистого кода

checkbox.service.ts & checkbox.component.ts 

@Injectable()
export class CheckBoxService {
  private _stream$ = new BehaviorSubject<boolean>(false);

  constructor() {}

  public getStream$(): Observable<boolean> {
     return this._stream$();
  }

  public toggle() {
    const currentValue = this._stream$.getValue();
    this._stream$.next(!currentValue);
  }
}

@Component()
export class CheckBoxComponent implements OnInit {
  private isSelected$ = new Observable<boolean>();

  constructor(
    private checkBoxService: CheckBoxService
  ) {}

  public ngOnInit() {
    this.isSelected$ = this.checkBoxService.getStream$();
  }

  public checkboxToggled() {
    this.checkBoxService.toggle();
  }
}

checkbox.component. html 

<input type="checkbox" [ngModel]="isSelected$ | async" (ngOnChanges)="checkboxToggled()">
...