Angular显示在其他路由中提交成功消息

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  messages: string[] = [];

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }
}

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-submit',
  template: `
    <button (click)="submit()">Submit</button>
  `
})
export class SubmitComponent {
  constructor(private messageService: MessageService) {}

  submit() {
    // 提交成功后的逻辑
    // ...

    this.messageService.add('提交成功！');
  }
}

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-messages',
  template: `
    <div *ngFor="let message of messageService.messages">
      {{ message }}
    </div>
    <button (click)="clearMessages()">Clear</button>
  `
})
export class MessagesComponent {
  constructor(public messageService: MessageService) {}

  clearMessages() {
    this.messageService.clear();
  }
}