刷新时未收到“路由器事件”

时间:2019-08-30 07:12:37

标签: angular angular-router angular8

我正在为我的项目做面包屑。我在这里有两个问题:

  1. 当我从其兄弟页面访问时,不会生成面包屑
  2. 页面刷新时未生成面包屑

如何解决这两个问题?

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, RoutesRecognized, NavigationStart,  NavigationEnd, Params, PRIMARY_OUTLET } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { BreadCrumbsService } from './../../services/bread-crumbs.service';


@Component({
    selector: 'bread-crumbs',
    templateUrl: './bread-crumbs.component.html',
    styleUrls: ['./bread-crumbs.component.scss']
})
export class BreadCrumbsComponent implements OnInit {

    breadcrumbList: Array<any> = [];

    /**
        * Setting Breadcrumb object, where name for display, path for url match,
        link for heref value, getting datas from BreadCrumbsService service
    */

    constructor(private router: Router, private bCService: BreadCrumbsService) {

        this.generateBreadCrumb();

    }

    ngOnInit() {}

    generateBreadCrumb() {

        console.log('hi');

        let routerUrl: string, routerList: Array<any>, target: any;

        this.router.events.subscribe((router: any) => {

            console.log('do'); //not consoles on above 2 points

            routerUrl = router.urlAfterRedirects;


        });

    }

}

1 个答案:

答案 0 :(得分:1)

我正在使用的路由器订阅逻辑更具限制性,并且可以正常工作:

constructor(private router: Router) { 
     router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                console.log(event.urlAfterRedirects);
            }
          });
}

所以我认为您的问题是由您设置路由器模块的方式引起的。 您是否通过在两个URL中使用两个组件来测试路由器是否正常工作? 还是愿意与我们共享您的路由器模块?