Angular2路由器的navigateByUrl（）沒有要求ngOnInit（）

我有相同的頁面上有兩個角的小應用程序。（長話短說）一個是導航應用程序，一個是主應用程序。我使用的是最新的Angular路由器，基於angular/vladivostok。Angular2路由器的navigateByUrl（）沒有要求ngOnInit（）

似乎在一個應用程序的角度路由器（例如，資產淨值）不被其他應用程序（例如，主應用程序）實例化URL變化作出反應。所以我創建了一個我提供給這兩個應用程序的類。它會監聽路由器的兩個事件NavigationEnd。當一個路由器（我們稱之爲「源」）有一個事件時，它會在另一個路由器上調用navigateByUrl（我們稱之爲「訂閱者」）。

這對大部分工作正常。但是，它不會在訂戶的組件上調用ngOnInit。

我創建a Plunk證明這一點的基礎上，從角的官方Routing & Navigation guide的活生生的例子。請注意，當您單擊主應用程序中的「危機中心」和「英雄」鏈接時，ngOnInit未在導航組件中的相應子組件上調用。但是，當您點擊導航組件中的這些鏈接時，ngOnInit是對這些子組件調用的，但而不是對主應用程序的子組件（這導致英雄/危機中心列表爲空）調用。

任何想法？謝謝！

RouterSynchronizer類：

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

interface ISubscriber { 
    id: string; 
    router: Router; 
} 

export class RouterSynchronizer { 
    private subscribers: ISubscriber[] = []; 

    connect(id: string, router: Router): void { 
    this.subscribers.push({ id, router }); 
    this.startPublishing(id, router); 
    } 

    private startPublishing(source: string, router: Router): void { 
    router.events.subscribe(route => { 
     if (route instanceof NavigationEnd) { 
     this.subscribers.forEach(subscriber => { 
      if (subscriber.id === source || subscriber.router.url === route.urlAfterRedirects) { 
      // Prevent infinite loops. 
      return; 
      } 

      subscriber.router.navigateByUrl(route.urlAfterRedirects); 
     }); 
     } 
    }); 
    } 
}

來源

2016-06-23 jessepinho

我想通了！顯然，我需要使用一個區域。實施見the new Plunk。

的問題（我想！）是我RouterSynchronizer類被實例化和角範圍之外提供。所以當它通過navigateByUrl將更改推送到路由器時，它不在Angular區域。一旦我將navigateByUrl呼叫打包到應用提供的區域中，它就可以工作:)

來源

2016-06-23 15:56:31 jessepinho

如果在另一個Angular實例中發出發出事件的方法，則當前的區域實例不知道它。你需要使用'區域。運行（（）=> {}）'，以便在當前Angular2應用程序的區域內執行代碼。 –

-1

您必須實現的OnInit像這樣：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'nav-heroes', 
    template: `<span *ngIf="hasRunOnInit">ngOnInit has run in NavCrisisCenterComponent</span>`, 
}) 

export class NavCrisisCenterComponent implements OnInit { 
    private hasRunOnInit: boolean; 

    ngOnInit() { 
    this.hasRunOnInit = true; 
} 
}

來源

2016-06-23 13:42:46 Ron

您是否在建議添加'implements OnInit'？這實際上並沒有任何運行效果。它只是它實現的方法的TypeScript編譯器的指示符。 – jessepinho

我跑你的項目，並實施OnInit它爲我工作。 – Ron

實現它可以讓你進入生命週期鉤子，否則你的OnInit只是另一個功能。參考：https：//angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#spy – Ron

Angular2路由器的navigateByUrl（）沒有要求ngOnInit（）

回答

相關問題