Question

我尝试按照本教程：http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications

我的路由有问题。当我在构造函数中使用路由器时，我得到一个解析错误。

notification.service.ts

＆＃13;

import {Injectable, Injector} from '@angular/core';
import {NavigationStart, Router} from '@angular/router';
import {Observable} from 'rxjs';
import {Subject} from 'rxjs/Subject';

import {Notification, NotificationType} from '../models/notification';

@Injectable()
export class NotificationService {
    private subject = new Subject<Notification>();
    private keepAfterRouteChange = false;
    
    constructor(private router: Router) {
        // clear notification messages on route change unless 'keepAfterRouteChange' flag is true
        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                if (this.keepAfterRouteChange) {
                    // only keep for a single route change
                    this.keepAfterRouteChange = false;
                } else {
                    // clear notification messages
                    this.clear();
                }
            }
        });
    }

    getNotification(): Observable<any> {
        return this.subject.asObservable();
    }

    success(message: string, keepAfterRouteChange = false) {
        this.notification(NotificationType.Success, message, keepAfterRouteChange);
    }

    error(message: string, keepAfterRouteChange = false) {
        this.notification(NotificationType.Error, message, keepAfterRouteChange);
    }

    info(message: string, keepAfterRouteChange = false) {
        this.notification(NotificationType.Info, message, keepAfterRouteChange);
    }

    warn(message: string, keepAfterRouteChange = false) {
        this.notification(NotificationType.Warning, message, keepAfterRouteChange);
    }

    notification(type: NotificationType, message: string, keepAfterRouteChange = false) {
        this.keepAfterRouteChange = keepAfterRouteChange;
        this.subject.next(<Notification>{type: type, message: message});
    }

    clear() {
        // clear notifications
        this.subject.next();
    }
}

＆＃13;

Uncaught Error: Provider parse errors:
    Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1 
    at NgModuleProviderAnalyzer.parse (compiler.js:19549)
    at NgModuleCompiler.compile (compiler.js:20138)
    at JitCompiler._compileModule (compiler.js:34436)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34365)
    at JitCompiler.compileModuleAsync (compiler.js:34259)
    at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.bootstrapModule (core.js:5551)
    at eval (main.ts:11)

我尝试用Injector解决这个问题，但是发生了其他错误

＆＃13;

constructor(private injector: Injector) {
  this.router.events.filter(event => event instanceof NavigationStart).subscribe(
  (event: NavigationStart) => {
    ...
  });
}

public get router(): Router {
  return this.injector.get(Router);
}

＆＃13;

RangeError: Maximum call stack size exceeded
    at StaticInjector.get (core.js:1109)
    at resolveNgModuleDep (core.js:10837)
    at _createClass (core.js:10882)
    at _createProviderInstance$1 (core.js:10848)
    at resolveNgModuleDep (core.js:10833)
    at _callFactory (core.js:10907)
    at _createProviderInstance$1 (core.js:10851)
    at resolveNgModuleDep (core.js:10833)
    at NgModuleRef_.get (core.js:12070)
    at NotificationService.get [as router] (notification.service.ts:27)

app.module.ts

＆＃13;

@NgModule({
    declarations: [
        AppComponent,
        NotificationComponent,
        ...
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        AngularFontAwesomeModule,
        routing
    ],
    providers: [
        UserService,
        {
            provide: ErrorHandler,
            useClass: GlobalErrorHandler
        },
        GlobalErrorHandler,
        NotificationService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

＆＃13;

通知将在error-handler.service.ts中触发

＆＃13;

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
    constructor(private notificationService: NotificationService) {
    }

    public handleError(error) {
        let message = "ERROR: ";
        if (error instanceof HttpErrorResponse) {
            message = message + error.status + ' ' + error.statusText;
            console.log(message);
            this.notificationService.error(message);
        } else {
            message = message + error;
            console.log(message);
        }
    }
}

＆＃13;

有人知道出了什么问题吗？

Angular 5：检测服务中的路由更改

0 个答案: