у меня есть сервис, компонент и модуль.
в службе, которой я хочу отправить изменения переменной флаг$.
export class ListUserService {
public flag$ = new Subject< boolean >();
}
Этот компонент вносит изменения в переменную
export class ListUserComponent implements OnInit {
private flagPerfil = false;
getFlag() {
return this.flagPerfil;
}
constructor(private listUserService: ListUserService) {
}
functionThatGetsCalledWhenTheFlagIsChanged(){
this.listUserService.flags$.next(this.flagPerfil);
}
}
Мне нужно получить переменную флаг$ в этом модуле:
export class Tab1PageModule {
public flagPerfil: boolean;
constructor(private listUserService: ListUserService) {
listUserService.flag$.subscribe((flag)=>{
console.info('FLAG', flag); //never show the console
this.flagPerfil = flag;
});
}
}
никогда не заходит в эту консоль console.info('FLAG', flag);
но возникает эта ошибка TS2322: тип «Тема» не может быть назначен типу «логический»., и в представлении модуля ничего не отображается
<ion-card-title> {{flagPerfil}} Puedes agregarlos para iniciar una amistad</ion-card-title>
Используйте субъект поведения, поскольку они имеют значение по умолчанию, и любые новые наблюдатели получают последнее испускаемое значение, субъекты уведомляют наблюдателей только тогда, когда они испускают, последнее значение теряется для новых наблюдателей.
export class ListUserService {
public flag$ = new BehaviorSubject<boolean>(false);
}
const { Subject, BehaviorSubject } = rxjs;
const subject$ = new Subject();
subject$.next('Subject initial val');
const behaviorSubject$ = new BehaviorSubject('BehaviorSubject initial val');
subject$.subscribe(val => { console.info(val); });
behaviorSubject$.subscribe(val => { console.info(val); });
subject$.next('Subject new val');
behaviorSubject$.next('BehaviorSubject new val');
<script src = "https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>
И используйте асинхронный канал в своем компоненте, чтобы вам не нужно было подписываться в коде.
export class ListUserComponent implements OnInit {
flags$ = this.listUserService.flags$;
constructor(private listUserService: ListUserService) {
}
functionThatGetsCalledWhenTheFlagIsChanged(value: boolean){
this.listUserService.flags$.next(value);
}
}
и в шаблоне представления
<ion-card-title> {{flag$ | async}} Puedes agregarlos para iniciar una amistad</ion-card-title>
представление принадлежит модулю и видит эту консоль console.info('', this.listUserService.flag$); // BehaviorSubject {_isScalar: false, наблюдатели: Array(0), Closed: false, isStopped: false, hasError: false, …}
теперь, если показать консоль, но переменная никогда не будет отображаться в представлении модуля <ion-card-title> {{flagPerfil}} Puedes agregarlos para iniciar una amistad</ion-card-title>