Соответствующая версия Firebase для отображения сообщения на переднем плане

Question

Поэтому я хочу, чтобы уведомление отображалось сразу после получения уведомления. В этом видео Angular 8 + Firebase я видел про версию 7.6.0. В моем случае tt отображается на переднем плане, но я должен щелкнуть что-то, чтобы снова направить его на страницу. Кто-нибудь сталкивался с этим, пожалуйста, скажите мне. Вот мой код, который был сделан после видео.

Мой messaging.service

export class MessagingService {
  tokenServer;
  currentMessage = new BehaviorSubject(null);
  constructor(private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messaging.subscribe(
      (_messaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      }
    );
  }

  requestPermission() {
    this.angularFireMessaging.requestToken.subscribe(
      (token) => {
        console.log(token);
        this.tokenServer = token;
      },
      (err) => {
        console.error('Unable to get permission to notify.', err);
      }
    );
  }

  receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
      (payload) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      });
  }
}

Мой component.ts

  second: number = 7;
  tokenServer;
  message;
  constructor(private messagingService: MessagingService) { }

  ngOnInit(): void {
    this.messagingService.requestPermission();
    //Gán token vào biến để sử dụng
    this.tokenServer = this.messagingService.tokenServer;
    this.messagingService.receiveMessage();
    this.message = this.messagingService.currentMessage;
  }

Мой html

<h1>
  {{ (message | async)?.notification.title }}
</h1>
<p>
  {{ (message | async)?.notification.body }}
</p>

Answer 1

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

Пожалуйста, найдите код ниже:

export class MessagingService {
  tokenServer;
  currentMessage = new BehaviorSubject(null);
  constructor(private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messaging.subscribe(
      (_messaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      }
    );
  }

  requestPermission() {
    this.angularFireMessaging.requestToken;
  }

  receiveMessage() {
    this.angularFireMessaging.messages;
  }


  second: number = 7;
  tokenServer;
  message;
  constructor(private messagingService: MessagingService) {}

  ngOnInit(): void {
    this.messagingService.requestPermission().subscribe(
      (token) => {
        console.log(token);
        this.tokenServer = token;
      },
      (err) => {
        console.error('Unable to get permission to notify.', err);
      }
    );

    this.messagingService.receiveMessage().subscribe(
      (payload) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      });
  }