Обновить значение в заголовке после изменения темы - PullRequest
Новая
       26

Обновить значение в заголовке после изменения темы

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

Я работаю над функцией уведомления в проекте Angular 5. В заголовке есть свойство notifications, в котором хранится количество новых уведомлений для этого пользователя.

Я хочу динамически обновлять это свойство notifications в заголовке после вызова из другого компонента, что означает, что я буду уменьшать его каждый раз время, когда пользователь нажимает на кнопку «видел». Но даже если компонент заголовка настроен для подписки при изменении субъекта службы уведомлений, значение notifications не меняется.

Это выдержка из notification.service.ts

export class NotificationService {
    notifications: any;
    public notificationChange: Subject<number> = new Subject<number>();

    constructor(private http: HttpClient){

        this.notificationChange.subscribe((value) => {
            this.notificationNumber = value;
        });
    }

    updateNotificationNumber(item: any) {   
        this.notificationChange.next(item);
    }
}

На моем notification.component.ts есть функция updateNotificationToSeen, вызываемая после нажатия кнопки (отправленное число жестко закодировано только для целей тестирования. Я сделаю это сразу после того, как увижу эффективные изменения), которое вызывает updateNotificationNumber из службы . 

export class NotificationComponent implements OnInit {
    constructor(private notificationService: NotificationService){}

    updateNotificationToSeen() {
        this.notificationService.updateNotificationNumber(150); 
    }
}

Это выдержка из header.component.ts, на которую я попытался подписать уведомлениеChange на constructor, но она не сработала. Я также попробовал способ, описанный ниже, на ngOnInit, но опять же, без изменений. 

export class HeaderComponent implements OnInit {

    notifications: number;

    constructor(public notificationService: NotificationService) {
    }

    ngOnInit(){
         this.notificationService.notificationChange.subscribe(value =>{
            this.notifications = value;
        })
    }

}

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

Буду признателен за любые мысли о лучшем решении для этого.

Ответы [ 2 ]

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

Вам необходимо использовать Observables здесь ... В сервисе выполните следующие действия: 

@Injectable({
    providedIn: 'root'
})
export class NotificationService {
    private notificationsSubject: BehaviorSubject<number> = new BehaviorSubject<number>(null);
    public notifications$ = this.notificationsSubject.asObservable();

    constructor(private http: HttpClient){}

    public updateNotifications(value: number): void {
        this.notificationsSubject.next(value);
    }
}

BehaviorSubject хранит текущее значение, поэтому оно более актуально для вашего конкретного случая. Также имейте в виду, что ваш сервис должен быть одноэлементным (providedIn: 'root' гарантирует это)

Теперь в вашем компоненте вам нужно внедрить этот сервис. Таким образом, вы можете подписаться на уведомления $ observable в любом месте и получить его текущее значение, а также выдавать новые значения с помощью вызова publi c method updateNotifications()

Таким образом, ваш компонент выглядит следующим образом: 

export class HeaderComponent implements OnInit {
    public notifications$: Observable<number>;

    constructor(public notificationService: NotificationService) {}

    ngOnInit(){
         this.notifications$ = this.notificationService.notifications$
    }
}

Использование AsyncPipe в шаблоне поможет вам при обработке отписки ...

Таким образом, шаблон заголовка будет выглядеть следующим образом: 

<div>{{ notifications$ | async }}</div>

//or

<ng-container *ngIf="notifications$ | async as notifications">
  <div >{{ notifications }}</div>
</ng-container>

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

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

Попробуйте отладить его так:

NotificationComponent 

updateNotificationToSeen() {
        console.log('Notification Component: updating notification number');
        this.notificationService.updateNotificationNumber(150); 
    }

NotificationService 

updateNotificationNumber(item: any) { 
        console.log('Notification Service: update notification number, calling next');  
        this.notificationChange.next(item);
    }

HeaderComponent 

ngOnInit(){
         this.notificationService.notificationChange.subscribe(value =>{
            console.log('HeaderComponent: Getting value');
            this.notifications = value;
        })
    }

Убедитесь, что вы получите

Notification Component: updating notification number Notification Service: update notification number, calling next HeaderComponent: Getting value

в таком порядке.

Если вы этого не получите, и один из них не войдет в систему, то это наиболее скорее всего виновник. Посмотрите, почему это не входит.

...