angular2 routerOnActivate不被調用

我有以下組件，一個主要和另一個。我想從主編程導航到另一個。angular2 routerOnActivate不被調用

主要

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" /> 
/// <reference path="../../node_modules/angular2/core.d.ts" /> 
/// <reference path="../../node_modules/angular2/router.d.ts" /> 

import {Component, provide} from 'angular2/core'; 
import {RouteConfig, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router'; 

@RouteConfig([ 
    { path: '/Main/...', name: 'Main', component: Main} 
]) 
@Component({ 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS], 
    selector: 'Main', 
    template: 
    '<div> 
     <button type="button" (click)="navigate()">Navigate</button> 
    </div>' 
}) 
export class Main { 
    constructor(private _router: Router) { } 

    navigate() { 
     this._router.navigateByUrl('Another'); 
    } 
}

另一個

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" /> 
/// <reference path="../../node_modules/angular2/core.d.ts" /> 
/// <reference path="../../node_modules/angular2/router.d.ts" /> 

import {Component, provide} from 'angular2/core'; 
import {RouteConfig, Router, ComponentInstruction, OnActivate, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router'; 

@RouteConfig([ 
    { path: '/Another/...', name: 'Another', component: Another} 
]) 
@Component({ 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS], 
    selector: 'Another', 
    template: 
    '<div [style.display]="isActive()"> 
     <h1>i'm another!</h1> 
    </div>' 
}) 
export class Another implements OnActivate { 
    constructor(private _router: Router) { } 

    IsActive = false; 

    isActive() { 
     return (this.IsActive === true) ? 'block' : 'none'; 
    } 

    routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
     this.IsActive = true; 
     console.log("called! surprisingly."); 
    } 
}

似乎routerOnActivate是從來沒有所謂的，雖然在瀏覽器的URL顯示Main/Another。爲什麼不叫它？

來源

2016-04-16 RoninCoder

也許polyfills設置不正確https://github.com/angular/angular/issues/8012 –

它已正確註冊在頁面上。順序與angular2快速入門建議的順序相同。沒有錯誤在控制檯中可見，所以我假設一切正常加載。 – RoninCoder

你看到'我是另一個！'當你瀏覽時，它可能無法正確導航，或者嘗試使用'router.navigate'而不是'router.navigateByUrl'導航 –

事實證明，如果您計劃使用Angular2路由器導航到組件，則不應該引導組件。您需要在項目規劃階段規劃您的導航策略。這將是經典模式，這意味着您將擁有父/子關係，並根據標誌或路由模式隱藏/顯示，這意味着您不要在其父模板中引導或添加組件標記，而是使用angular的路由器。 Angular本身將自動處理所有導航和顯示/隱藏組件。所需的全部是RouteConfig並引導您的主要組件。

另請注意，angular2教程不適合特定語言。如果您在ASP.NET MVC中有一個路徑爲www.something.com/angular/router的網站，則RouteConfig中的/不是www.something.com/，而是整個URL。

關於RouteConfig路徑，您只需要爲每個組件定義子導航。

來源

2016-04-18 15:48:22 RoninCoder

您的到Another的路由是非終端路由由於使用了elipsis ...最後。

您需要在模板中包含<router-outlet></router-outlet>，以便路由器知道要渲染的位置。

如果要導航到Another，則需要在@RouteConfig中創建路徑爲/的默認路由。

{ path: '/', name: 'AnotherDefault', component: AnotherDefault, useAsDefault: true }

另一種選擇是從路徑的末端去除...，例如， path: '/Another'如果你想導航到它。

來源

2016-04-17 01:59:23 Brad

如果我刪除'...'，我會得到錯誤「子路由不允許使用」/「。在父路由路徑上使用」...「。」「另一個」也有孩子。 – RoninCoder

angular2 routerOnActivate不被調用

回答

相關問題