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中的另一个组件后如何发送消息？

1 个答案: