Подписка Observable сработала дважды

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

Вот мой NotificationService:

export class NotificationSharedService {
    private emitChangeSource = new Subject<any>();
    changeEmitted = this.emitChangeSource.asObservable();

    emitChange(change: any) {
        console.log(change);
        this.emitChangeSource.next(change);
    }

    getData(): Observable<any> {
        return this.changeEmitted;
    }
}

Отсюда я отправляю текущий статус для NotificationComponent:

const setDefaultImageRequest = this.images.defaultImage(id_image)
    .map((data: ResponseService) => {
        return Image.createFromObject(data.data);
    })
    .subscribe((data) => {
        console.log(data);
        this.defaultImage.id = data.id;
        this.propertyGalleryStatus = true;
        const status = {
            'message': 'Изображение по-умолчанию установлено успешно',
            'status': true
        };
        this.notificationShared.emitChange(status);

    }, (errors) => {
        console.log(errors);
        this.propertyGalleryStatus = true;
    });

    this.subscriptions.push(setDefaultImageRequest);

Вот мой NotificationComponent, на который я подписан:

constructor(public sharedData: NotificationSharedService) {
    const getSharedData = this.sharedData.getData().subscribe((data) => {
        console.log(data);
        this.status = false;
        this.statusError = false;
        this.state = true;
        if (data.internet_connection !== undefined) {
            if (!data.internet_connection) {
                console.log(data);
                this.message = this.messages.internet_error;
                this.statusError = data.statusError;
                console.log(this.message);

                return;
            }
        }

        this.message = data.message;
        this.status = data.status;
        this.statusError = data.statusError;

        this.fadeNotification = setTimeout(() => {
            this.state = false;
            setTimeout(() => {
                this.status = false;
            }, 5000);
            this.statusError = false;
        }, 4000);
    });

    this.subscriptions.push(getSharedData);
}

Вот ответ, где подписка сработала дважды:

введите здесь описание изображения

Вот скриншот, на котором шаблон уведомления срабатывает дважды:

введите здесь описание изображения

Вот шаблон уведомления

<div on-mouseover="hoverNotification()" on-mouseout="unhoverNotification()" [ngClass]="{sbNotificationActive: state, sbNotificationSuccess: status, sbNotificationFailure: statusError}" class="sb-notification">
<div class="sb-notification__wrapper">
    <div class="sb-notification__box">
        <span class="sb-notification__message">{{message}}</span>
        <a *ngIf="!linkStatus" role="button" (click)="reloadPage()" class="sb-notification__reload">Reload page</a>
    </div>
    <div (click)="close()" class="sb-notification__close-button">
        <i class="sb-notification__icon flaticon-cancel"></i>
    </div>
</div>


person Metallistener    schedule 07.04.2018    source источник
comment
Покажите нам декоратор @Component в NotificationComponent.   -  person Luillyfe    schedule 07.04.2018


Ответы (2)


Вы не можете получить несколько выходных данных из одной подписки, подписавшись на один Observable. Ваш сервис является синглтоном. В вашем NotificationService этот console.log(change); и в NotificationComponent этот console.log(data); печатает это сообщение несколько раз. Удалите этот console.log() из NotificationService, и вы увидите только один вывод.

person buzz    schedule 07.04.2018
comment
На скриншоте видно, что консоль срабатывала дважды только на 29 строке. - person Metallistener; 07.04.2018
comment
Я добавил новый снимок экрана, на котором вы можете видеть, что div уведомлений срабатывает дважды. - person Metallistener; 07.04.2018
comment
Можете ли вы показать, как вы помещаете данные в шаблон? Как будто печатает дважды значит есть две подписки - person buzz; 07.04.2018
comment
Да, конечно. Я добавил - person Metallistener; 07.04.2018
comment
И как вы отображаете это уведомление? Поскольку этот шаблон отображается дважды, верно? Как вы его включаете? - person buzz; 07.04.2018
comment
Я передаю объект с сообщением и статусом: true, и когда я получаю этот объект в компоненте уведомлений, мое состояние уведомления становится истинным, и я его отображаю - person Metallistener; 07.04.2018

Вы можете использовать простой флаг, чтобы предотвратить это.

this.isDataLoaded = false;

// use OnInit instead of constructor
constructor(public sharedData: NotificationSharedService) {                                             
    const getSharedData = this.sharedData.getData().subscribe((data) => {
    console.log(data);
    if(this.isDataLoaded) { this.isDataLoaded = false; return; } 
    if(!this.isDataLoaded) {
      this.isDataLoaded = true;
      // do other stuff
    }
}
person Mirko Acimovic    schedule 07.04.2018