要在Angular 7的路由导航后重定向时附带消息,你可以使用以下方法:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class MessageService {
private messageSource = new Subject();
public message$ = this.messageSource.asObservable();
sendMessage(message: string) {
this.messageSource.next(message);
}
}
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { MessageService } from './message.service';
@Component({
template: `
`
})
export class HomeComponent {
constructor(private router: Router, private messageService: MessageService) {}
navigateWithMessage() {
this.messageService.sendMessage('Hello from Home Component');
this.router.navigate(['/destination']);
}
}
import { Component, OnInit } from '@angular/core';
import { MessageService } from './message.service';
@Component({
template: `
{{ message }}
`
})
export class DestinationComponent implements OnInit {
message: string;
constructor(private messageService: MessageService) {}
ngOnInit() {
this.messageService.message$.subscribe(message => {
this.message = message;
});
}
}
现在,当你从Home组件导航到Destination组件时,将会重定向并附带消息。在Destination组件中,你可以订阅消息服务以获取传递的消息,并在模板中显示它。