Açısal 2 yönlendirici olay dinleyicisi

Question

Açısal 2 yönlendiricide durum değişikliği nasıl dinlenir? Eğik 1.x

ben bu olayı kullandı:

geri dönmek değil

window.addEventListener("hashchange",() => {return console.log('ok')}, false); 

'Tamam', daha sonra değişiklik: Yani

$rootScope.$on('$stateChangeStart', 
    function(event,toState,toParams,fromState,fromParams, options){ ... }) 

ben Açısal 2'de bu EventListener kullanırsanız JS'den, sadece tarayıcı history.back() işlevi çalıştır. yönlendirme init bileşeninde

import {Injectable} from 'angular2/core'; 
import {Router} from 'angular2/router'; 

@Injectable() 
export class SubscribeService { 
    constructor (private _router: Router) { 
     this._router.subscribe(val => { 
      console.info(val, '<-- subscribe func'); 
     }) 
    } 
} 

enjekte hizmeti:

import {Component} from 'angular2/core'; 
import {Router} from 'angular2/router'; 

@Component({ 
    selector: 'main', 
    templateUrl: '../templates/main.html', 
    providers: [SubscribeService] 
}) 
export class MainComponent { 
    constructor (private subscribeService: SubscribeService) {} 
} 

böyle bu örnekte olduğu gibi diğer bileşenler bu hizmeti enjekte hizmet olarak

kullanımı router.subscribe() işlev . Ardından, çalışmakta olan service.confo() durumunu değiştiririm.

Neyi yanlış yapıyorum?

Answer 1

import {Router} from 'angular2/router'; 

class MyComponent { 
    constructor(router:Router) { 
    router.subscribe(...) 
    } 
} 

NOT Router enjekte ve rota değişikliği etkinliklere abone

constructor(router:Router) { 
    router.events.subscribe(event:Event => { 
    if(event instanceof NavigationStart) { 
    } 
    // NavigationEnd 
    // NavigationCancel 
    // NavigationError 
    // RoutesRecognized 
    }); 
} 

eski yeni yönlendirici

yeni router için, içe yoksa instanceof çalışmaz ve bir hata artacak çünkü router modülü

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

den NavigationStart ithal etmeyi unutmayın.

tüm devlet değişiklikleri dinlemek varsayılan RouterOutlet genişletmek ve 'etkin' kendi mantığı ekleyebilir ve işleyicileri 'devre dışı' Kime da

• https://angular.io/docs/ts/latest/api/router/index/Router-class.html
• How to detect a route change in Angular 2?

Answer 2

bakınız.Burada 'Özel Yönlendirici Outlet' örnekten Kopyalanan

import {Directive} from 'angular2/core'; 
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router'; 

@Directive({ 
    selector: 'router-outlet' 
}) 

export class MyOwnRouterOutlet extends RouterOutlet { 
    ... 

    activate() { 
    console.log('Hello from the new router outlet!'); 
    } 
} 

: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

Answer 3

Sen GünterZöchbauer @olarak instanceof kullanabilirsiniz

this.router.events.subscribe(event => { if(event instanceof NavigationStart) { // do something... } } 

cevap veya bir lazier yaklaşımı kullanabilirsiniz Ancak, işlev hala çalışırken, yapıcı isminin kolayca değiştirilebileceğini unutmayın!

this.router.events.subscribe(event => { 
    if(event.constructor.name === "NavigationStart") { 
    // do something... 
    } 
}); 

Answer 4

açısal 2 yönlendirici olayları farklı sınıflar vardır ve ne ya NavigationEnd, NavigationCancel, NavigationError veya NavigationStart olabilir gözlemlenebilir router.events gelen abonelik geçirilir. Bir yönlendirme güncellemesini gerçekte tetikleyecek olan NavigationEnd olacaktır. küçültülmesi sınıf adları karıştırılmış alacak sonra düzgün çalışamayacak çünkü

uzakta instanceof veya event.constructor.name kullanmaktan kalmak istiyorum. Sen "app.modules.ts" dosyasına gidin angular2 burada https://angular.io/docs/ts/latest/api/router/index/Router-class.html

this.routerEventSubscription = this._router.events.subscribe((event: any) => { 
    if (this._router.isActive(events.url, false)) { 
    // true if the url route is active 
    } 
} 

Answer 5

gösterilen yerine yönlendiricinin isActive işlevini kullanabilirsiniz

-> true gösterisi EnableTracing içinde ithalatı

RouterModule.forRoot(
     appRoutes, 
     { 
     enableTracing: true 
     } 
) 

konsolda içinde routeEvents false gizle rotayı denetle konsolu