Question

我的服务需要很长时间才能返回。用户提交请求后，他/她应该能够导航到任何其他页面。

我如何提醒她，她提交的请求已经处理（服务已经退回），无论他/她目前在哪个页面？

Answer 1

您有两个选择：

您可以创建另一个组件，假设alertBox将添加到您的应用框架中：

<alert-box></alert-box>
<div class="main">
    <router-outlet></router-outlet>
</div>

然后你可以得到服务：

export class MyService {
    private someObservable: BehaviorSubject<any> = new BehaviorSubject<any>();

    public makeSomeAction(): void {
        //some action
        this.someObservable.next('result');
    }

    public actionCompleted(): Observable<any> {
         return this.someObservable;
    }
}

注入组件：

@Component({})
export class ComponentOne {
    constructior(private _service: MyService) {}

    public someMethod() {
        this._service.makeSomeAction();
    }
}

@Component({})
export class AlertBox {
    constructior(private _service: MyService) {}

    public actionCompleted: void {
        this._service.actionCompleted.subscribe(() => console.log('action completed'));
    }
}

你可以在这个组件中处理你的observable。

另一种解决方案是使用angular material。有一个snackbar组件完全符合您的需求：https://material.angular.io/components/snack-bar/overview

使用示例：

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

@Injectable()
export class SnackBarService {

    constructor(private snackBar: MatSnackBar) {
    }

    public displayNotification(): void {
        const config: MatSnackBarConfig = new MatSnackBarConfig();
        config.duration = 1000; //time in ms

        this.snackBar.open("message", "action", config).afterDismissed().subscribe(() => {
             console.log('snackbar dismissed');
        });
    }
}

在路由到另一个组件之后，在服务返回时通知用户

1 个答案: