Angular2 监视路线变化答案

【问题标题】：Angular2 watch for route changeAngular2 监视路线变化
【发布时间】：2015-12-23 22:40:32
【问题描述】：

@RouteConfig([
    {path: '/about', name: 'About', component: About, useAsDefault: true},
    {path: '/test', name: 'Test', component: Test}
])

export class MyApp {
    router: Router;
    location: Location;
    isCollapsed: boolean = true;

    // ON ROUTE CHANGE {
        this.isCollapsed = true;
    // }

    constructor(router: Router, location: Location) {
        this.router = router;
        this.location = location;
    }
}

我需要在每次路由更改时更改变量值，如何在 Angular 2.x 中监视此事件？

【问题讨论】：

对于新路由器 (=> RC.3)，请参阅 stackoverflow.com/questions/37137455/…

标签： typescript angular

【解决方案1】：

在最终版本的 Angular（例如 Angular 2/4）中，您可以这样做

this.router.events.subscribe((event) => {
    if(event.url) {
        console.log(event.url);
    }
});

每次路线改变时，events Observable 都会有信息。点击here 获取文档。

【讨论】：

这成功了！请注意，路由器元素是路由器的一个实例：您应该import {Router} from '@angular/router'; 和constructor(private router: Router) { }。
类型事件上不存在属性 url。
你能回答这个问题吗？六二49843九
现在 Angular 中有多种事件类型，因此您需要先检查事件类型。然后，您可以使用每个的特定属性。例如，if (event instanceof NavigationEnd) { event.url...; } 更多类型请参见此处的文档：angular.io/api/router/NavigationEnd

【解决方案2】：

事件是可观察的，所以你可以订阅它，我已经在angular5中成功尝试过

this.router.events.subscribe((event) => {
console.log(event);
 if(event['url'] && event['url'] == '/') {
    console.log('Home page');
    //any other functionality you can do here
 }
});

【讨论】：

角度 6 的有效答案

【解决方案3】：

如果你正在使用

"@angular/router": "3.0.0-alpha.7", 
"@angular/router-deprecated": "2.0.0-rc.2",

然后

this.router.events.subscribe((event) => {
      console.log('route changed');
});

【讨论】：

这是当前版本的正确答案。 Goli 这很难找到。 +1
+1 您的回答对当前版本的 Angular2 有效。 this.router.subscribe() 不再起作用。相反，您需要订阅 events，就像 Dimpu 所说的那样！

【解决方案4】：

这是我在应用中使用的内容。您可以订阅 Route 实例以跟踪更改。

class MyClass {
  constructor(private router: Router) {
    router.subscribe((val) => /*detect changes*/)
  }
}

【讨论】：

抱歉，在您更改 Angular2 的答案之前对此投了反对票，这是正确的
谢谢！完美运行。
@ulydev 请您提供此路由器更改检测的 plnkr 或工作代码我无法告诉您如何使用您的代码。
router.subscribe 不会使用 angular beta.2 触发任何想法？
试试this.router.changes.subscribe

【解决方案5】：

如果你想在路由改变时捕获事件，并初始化一些像 jQuery 这样的代码，那么使用OnActive 钩子。例如：

import {Component} from 'angular2/core';
import {OnActivate,ComponentInstruction} from "angular2/router";
declare var $:any;
declare var Foundation:any;
@Component({
templateUrl :'/app/templates/home.html'
})
export class HomeComponent implements OnActivate{

  routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction)
  {

    new Foundation.Orbit($("#es-slide-show"), {});
    return true;
  }
}

【讨论】：

【解决方案6】：

这是最好的方法：

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

constructor(private router: Router) {}

ngOnInit(): void {
  this.router.events.pipe(
    filter((evt: RouterEvent) => evt instanceof NavigationEnd)
  ).subscribe((evt: RouterEvent) => {
    // with the above filter, both the following will always log the same url
    console.log(evt.url)
    console.log(this.router.url)
  })
}

【讨论】：