Angular 2 this.router.events.subscribe 在刷新或输入 url 时不起作用

Question

我有一个用 Angular 2 编写的应用程序，导航在每条路线上看起来应该略有不同。我正在使用 this.router.events.subscribe 监听 NavigationEnd 单击链接时它工作正常，但是当页面刷新或您在网址栏中输入路线。

这是我的订阅功能的一部分:

subscribeToEvents() {
    this.router.events.subscribe((val) => {
        // see also 
        if (val instanceof NavigationEnd) {
            this.getCompanyName();
            var rou = val.url.toLowerCase().trim();
            console.log("our route", rou);
            switch (rou) {
                case "/projectlist":
                    this.currentPage = "projects";
                    this.page = "Project List";
                    break;

我尝试了控制台日志记录 this.router.url 来查看出现了什么，当我刷新页面时它总是控制台日志“/”。

Answer 1

我想出了一个解决方案，我只是在导航栏的 ng-init 中添加了一个超时，然后 this.router.url 获得了正确的路线。

      setTimeout(() => {
            if (this.router.url === '/projectlist') {
                this.currentPage = "projects";
                this.page = "Project List"
            } else if (this.router.url === '/dashboard') {
                this.currentPage = "dashboard";
                this.page = "Dashboard";
            } else if (this.router.url === '/equipmentlist') {
                this.currentPage = "equipment";
                this.page = "Equipment"
            } else if (this.router.url === '/recipelist') {
                   ... more routes ...
            } else {
                this.page = "Default";
            }
        }, 100);