此路由器事件在安格朗中首次加载时未加载

Question

有没有人知道如何在首次加载组件时触发路由器事件？我使用的是角度8。我有一个深层链接，可以移动到另一个组件。因此，当我单击深层链接时，它会重定向到主页。每当计算机启动新会话时，都会发生这种情况。因此，根据我的调查，当应用程序首次加载时，它（this.router.events）不返回任何内容。任何人都可以向我建议它。以下是我的代码：- 应用程序组件.ts ngAfterViewInit() {    this.getActivatedRoute();}getActivatedRoute() {    debugger    const routerSub$ = this.router.events.subscribe((event) => {      if (event instanceof NavigationEnd) {        this.routes = event.url.toLowerCase().split('/');        this.currentRoute = this.routes[1];        if (this.currentRoute !== this.previousRoute) {          this.setBodyClassBasedOnRouter(this.routes);          this.previousRoute = this.currentRoute;        }      }    });  }

Answer 1

当组件注册该事件时，已引发该事件。最好的解决方案是使用 rxjs 运算符，并让组件从注入的 Route 加载初始状态，如下所示：NavigationEndstartWith

const routerSub$ = this.router.events.pipe(

  filter((e) => e instanceof NavigationEnd),

  startWith(this.router)).

  subscribe((event) => {

        this.routes = event.url.toLowerCase().split('/');

        this.currentRoute = this.routes[1];

        if (this.currentRoute !== this.previousRoute) {

          this.setBodyClassBasedOnRouter(this.routes);

          this.previousRoute = this.currentRoute;

        }

    });

请注意，当构造函数运行时（如果在构造函数内部使用），仍不会呈现 HTML 元素。

Answer 2

在构造函数中使用它

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

class ...   

constructor(private router:Router) {

    

        this.router.events

        .pipe(

          filter(event => event instanceof NavigationEnd),

          map((event: NavigationEnd) => event.url))

        .subscribe(url => {

    

          const lastUrlSegment = url.split('?')[0].split('/').pop()

          console.log(lastUrlSegment)

          console.log(url)

        });

    

    }

Answer 3

使用激活布线的第一个负载

...constructor(public activatedroute: ActivatedRoute,) {}
... 
this.activatedroute.url.subscribe(data=>{
            ....
     })