在服务 returns 路由到另一个组件后通知用户

Question

我有一项服务需要很长时间才能 return。用户提交请求后，he/she 应该能够导航到任何其他页面。

无论 he/she 当前位于哪个页面，我如何提醒她她提交的请求已被处理（服务已 returned）？

Answer 1

您有 2 个选择：

您可以创建另一个组件，比方说 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'));
    }
}

并且您可以在此组件中处理您的可观察对象。

另一个解决方案是使用 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');
        });
    }
}

在服务 returns 路由到另一个组件后通知用户

Notifying user when service returns, after routing to another component

angular

angular2-routing

angular2-services

angular2-observables

angular2-http