角路由器事件答案

【问题标题】：Angular Router Event角路由器事件
【发布时间】：2019-08-19 08:19:11
【问题描述】：

尝试使用在 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：“（事件：NavigationEnd）=> void”类型的参数不可分配给“（（值：事件）=> void）类型的参数 | 不明确的'。类型 '(event: NavigationEnd) => void' 不可分配键入“（值：事件）=> void”。参数 'event' 和 'value' 的类型不兼容。类型“事件”不可分配给类型“导航结束”。类型“RouterEvent”不可分配给类型“NavigationEnd”。 “RouterEvent”类型中缺少属性“urlAfterRedirects”。

【问题讨论】：

标签： angular azure-application-insights

【解决方案1】：

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

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

您需要导入这些类型：

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

【讨论】：