Question

我有两个组成部分。在服务器成功响应的第一个示例中，我想执行以下操作：

this.router.navigate(['']);
this.snackBarMessage = 'Successfully submitted';

然后将页面重定向到另一个组件，我想在那儿显示SnakeBarMessage消息，例如（ngOnInit（））

类似的东西：

this.snackBarService.openSnackBar(snackBarMessage, 'Close', 9999999);

我的快餐吧服务：

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

@Injectable({
  providedIn: 'root'
})
export class SnackBarService {

  constructor(private matSnackBar: MatSnackBar) { }

  openSnackBar(message: string, action: string, duration?: number) {
    this.matSnackBar.open(message, action, { duration });
  }
}

我该如何实现？导航后如何将snackBarMessage传递给另一个组件？

Answer 1

.search { height: 200px; position: absolute; z-index: 999; top: 0; right: 0px; &__content { top: 200px; left: 320px; width: 430px; height: 50px; background-color: #fff; border-radius: 34px; box-shadow: 0px 0px 12px rgba(0,0,0,0.3); input { width: 380px; height: 50px; background: transparent; border: 0; display: block; padding: 0px 32px 10px 10px; font-size: 14px; color: #000; border-radius: 34px; border: none; outline: none; } input::-webkit-calendar-picker-indicator { display: none; } .input-field input.placeholder { color: #ccc; font-size: 14px; } .inner-addon { position: relative; top: 5px; left: 22px; } // .search-icon { // // color: #576a8b; // color: #000; // font-size: 20px; // } // .search-icon:hover { // cursor: pointer; // color: gray; // } // .inner-addon i { // position: absolute; // } // .left-addon i { left: 0px;} // .left-addon input { padding-left: 30px; } } }返回您可以订阅的承诺。导航成功后，将执行此承诺。请参阅此Documentation以获取更多信息。

this.router.navigate([``])

Answer 2

您可能会显示该消息，然后导航：

使用afterDismissed（）方法：

this.snackBar.open('msg', 'close', {
                  duration: 2000
                }).afterDismissed().subscribe(()=>{
                  this.router.navigate(['']);
                });

导航后的角度显示小吃店

2 个答案: