this.router.events.filter 不是一个函数

Question

我们已将项目更新为 Angular 17。 我收到此 ERROR TypeError: this.router.events.filter is not a function 在控制台中。

这是app.components.ts文件代码

import { AfterViewInit, Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
import { environment } from "../environments/environment";
import { Title, Meta } from '@angular/platform-browser';
import { WINDOW } from '@ng-toolkit/universal';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { CookieService } from 'ngx-cookie-service';
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';
import { HttpClientModule } from '@angular/common/http';
import { LoadingComponent } from './shared/components/loading/loading.component';
import { DataService } from './shared/service/data.service';
import { LoaderService } from './shared/service/loader.service';
import { SeoService } from './shared/service/seo.service';

declare const ga: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [RouterModule, NgIdleKeepaliveModule, LoadingComponent, HttpClientModule],
  providers: [{ provide: WINDOW, useValue: {} }]
})

export class AppComponent implements OnInit, AfterViewInit {
  title = 'motor-happy';
  serverName: String;
  idleState = 'Not started.';
  timedOut = false;
  lastPing?: Date = null;
  title1 = 'angular-idle-timeout';
  expiredDate: Date;
  constructor(@Inject(WINDOW) private window: any,
    @Inject(PLATFORM_ID) private platformId: Object,
    public router: Router,
    public activatedRoute: ActivatedRoute,
    public titleService: Title,
    public meta: Meta,
    public cookieService: CookieService,
    public dataService: DataService,
    public loaderSVC: LoaderService,
    public seoService: SeoService,
    public idle: Idle,
  ) { 

    idle.setIdle(600);
    idle.setTimeout(600);
    idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    idle.onTimeout.subscribe(() => {
      this.timedOut = true;
      localStorage.removeItem('authorisationToken');
      this.router.navigate(['/']);
    });
    this.reset();
    this.serverName = environment.name;

    this.activatedRoute.queryParams.subscribe(params => {
      let utm_CampaignSource = params['utm_CampaignSource'];
      let getCookie = this.cookieService.get('utm_fetch');

      if (utm_CampaignSource && (!getCookie)) {
        const dateNow = new Date();
        dateNow.setMinutes(dateNow.getMinutes() + 30);
        this.cookieService.set('utm_fetch', "Yes", dateNow, '', '', true);
      }
    });

  }

  reset() {
    this.idle.watch();
    this.timedOut = false;
  }

  ngAfterViewInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd && isPlatformBrowser(this.platformId)) {
        if (this.serverName == "production") {
          ga('set', 'page', event.urlAfterRedirects);
          ga('send', 'pageview');
        }
      }
    });
  }

  ngOnInit() {
    this.seoService.createLinkForCanonicalURL();
    this.router.events.subscribe((evt) => {
      this.loaderSVC.startLoading();      
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      setTimeout(() => {
        this.loaderSVC.stopLoading();        
      });
      if (isPlatformBrowser(this.platformId)) {
        window.scrollTo(0, 0);

        const userAgent = window.navigator.userAgent;
        sessionStorage.setItem('userAgent', userAgent);
        sessionStorage.setItem('ipAddress', '0.0.0.0');
      }
    });

    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => {
        this.updateDescription(event['description'], event['keywords'], event['title']);
      });
  }

  updateDescription(desc: string, keywords: string, title: string) {
    if (title) {
      this.titleService.setTitle(title);
    }
    if (desc) {
      this.meta.updateTag({ name: 'description', content: desc })
    }
    /*if(keywords){
      this.meta.updateTag({ name: 'keywords', content: keywords })
    }*/
  }
}

我们已尝试更新 这个.router.events.filter 和 this.router.events.pipe（过滤器（事件=>事件实例NavigationEnd） 但之后不知道如何映射

Answer 1

由于

Router.events

属性返回一个可观察值，因此您应该将所有运算符封装在

pipe

中。这是正确处理路由器发出的事件流所必需的。将运算符与

pipe

链接后，您可以订阅 observable 以检索所需的值。