Angular 7 重定向到另一个组件后如何发送消息？

Question

我有一个用户注册并且在提交表单时，我正在重定向到另一个组件（比方说主页组件），我想在其中向用户显示一条成功消息。

我可以在提交表单时将用户重定向到主页组件，我已经创建消息服务来发布消息，我的主页组件订阅了消息。

但是，在重定向主页组件后，消息没有显示。

代码如下：

  onSubmit(userForm){
     // save the record to db
      .subscribe(
        data => {
          let message = 'Thank you for signing up'; 
          this._messageService.sendMessage({text: message, category: 'success'});
          this._router.navigate(['/home']);
        },
        error => {
          // error handling
        }
      )
  }

这是消息服务

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

export interface IMessage{
  text: string,
  category: string 
}

@Injectable({
  providedIn: 'root'
})

export class MessageService {
  constructor() { }
  private subject = new Subject<any>();

    sendMessage(data: IMessage) {
        console.log("Sending message: ", data)
        this.subject.next({ data: data }); 
    }

    getMessage(): Observable<any> {
       return this.subject.asObservable();
    }

}

主页订阅了消息

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageService, IMessage } from '../message.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  messages: IMessage[] = [];
  subscription: Subscription;

  constructor(private messageService: MessageService) { 
    // subscribe to messages
    this.subscription = this.messageService.getMessage().subscribe(message => {
      if (message) {
        this.messages.push(message.data);
      } else {
        // clear messages when empty message received
        this.messages = [];
      }
    });
  }

Answer 1

在这种情况下，您在 Subject 对象已经发送了有关消息的信息后订阅它。 Subject 不会保存有关发送给它的最后数据的信息，它只是将数据发送给订阅的对象，仅此而已。

而不是使用 Subject 尝试使用 BehaviorSubject，在这种情况下，订阅后它将发送您尝试从 onSubmit 函数发送的最后数据。

Angular 7 重定向到另一个组件后如何发送消息？

How to send message after redirecting to another component in Angular 7?

angular

angular-router

angular7