Angular 路由器事件

Question

尝试使用 github https://github.com/sandorfr/ngx-app-insights-sample/issues/1中找到的一些 applicationinsights 服务，但该服务似乎遇到了错误

尝试按照 stackoverflow 中的建议导入一些事件

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, ResolveEnd, ActivatedRouteSnapshot } from '@angular/router';
import { Subscription } from 'rxjs';
import 'rxjs/add/operator/filter';
import { AppInsights } from 'applicationinsights-js';
import { NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
const environment = {
    production: false,
    appInsights: {
        instrumentationKey: 'sampleinstrumentationkey'
    }
};
@Injectable()
export class MonitoringService {

    private routerSubscription: Subscription;

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute
    ) {
        if (environment.appInsights && environment.appInsights.instrumentationKey) {
            if (AppInsights.downloadAndSetup) {
                AppInsights.downloadAndSetup(environment.appInsights);
            }
        }
        router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe((event: NavigationEnd) => {
            const activatedComponent = this.getActivatedComponent(router.routerState.snapshot.root);
            if (activatedComponent) {
                this.logPageView(`${activatedComponent.name} ${this.getRouteTemplate(router.routerState.snapshot.root)}`, event.urlAfterRedirects);
            }
        });
    }

    setAuthenticatedUserId(userId: string): void {
        AppInsights.setAuthenticatedUserContext(userId);
    }

    private getActivatedComponent(snapshot: ActivatedRouteSnapshot): any {

        if (snapshot.firstChild) {
            return this.getActivatedComponent(snapshot.firstChild);
        }

        return snapshot.component;
    }

    private getRouteTemplate(snapshot: ActivatedRouteSnapshot): string {
        let path = '';
        if (snapshot.routeConfig) {
            path += snapshot.routeConfig.path;
        }

        if (snapshot.firstChild) {
            return path + this.getRouteTemplate(snapshot.firstChild);
        }

        return path;
    }

    private AddGlobalProperties(properties?: { [key: string]: string }): { [key: string]: string } {
        if (!properties) {
            properties = {};
        }

        //add your custom properties such as app version

        return properties;
    }

    public logPageView(
        name: string,
        url?: string,
        properties?: { [key: string]: string },
        measurements?: { [key: string]: number },
        duration?: number) {

        AppInsights.trackPageView(name, url, this.AddGlobalProperties(properties), measurements, duration);
    }

    public logEvent(name: string, properties?: { [key: string]: string }, measurements?: { [key: string]: number }) {
        AppInsights.trackEvent(name, this.AddGlobalProperties(properties), measurements);
    }

    public logError(error: Error, properties?: { [key: string]: string }, measurements?: { [key: string]: number }) {
        AppInsights.trackException(error, undefined, this.AddGlobalProperties(properties), measurements);
    }
}

代码可以正常工作，但在一定时间内我遇到以下错误

[at-loader] 中出现错误 ./ClientApp/app/components/services/app-insights/app-insights.service.ts:30:21

TS2345：“(event: NavigationEnd) => void”类型的参数不可分配给“((value: Event) => void)”类型的参数 | 不明确的'。类型“(event: NavigationEnd) => void”不可分配给类型“(value: Event) => void”。参数“事件”和“值”的类型不兼容。类型“Event”不可分配给类型“NavigationEnd”。类型“RouterEvent”不可分配给类型“NavigationEnd”。“RouterEvent”类型中缺少属性“urlAfterRedirects”。

Answer 1

我相信告诉 Typescript 过滤器运算符将确保事件的类型为 NavigationEnd 将解决该错误：

        router.events.pipe(
            filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd)
        ).subscribe((event: NavigationEnd) => {

您将需要导入这些类型：

import { Event, NavigationEnd } from '@angular/router';