2015-11-21 22 views
3

我正面臨一個問題router.parent.navigate在Angular 2. 而且我不知道這是Angular問題還是我的代碼有問題。
當我有父組件App.ts其中內容配置路由和主機的所有意見。問題與Router.Parent.Navigate()

///<reference path="../../node_modules/angular2/angular2.d.ts"/> 
///<reference path="../../node_modules/angular2/router.d.ts"/> 
///<reference path="./BusinessNameLookup/BusinessNameLookup.ts"/> 
///<reference path="./LookupDetails/LookupDetails.ts"/> 
///<reference path="./BusinessNames/BusinessNames.ts"/> 
///<reference path="./BusinessWebAddress/BusinessWebAddress.ts"/> 
///<reference path="./BusinessCategory/BusinessCategory.ts"/> 
///<reference path="./ContactInformations/ContactInformations.ts"/> 
///<reference path="./BusinessPurchaseAddress/BusinessPurchaseAddress.ts"/> 
///<reference path="./BusinessImages/BusinessImages.ts"/> 
///<reference path="./SurveyQuery/SurveyQuery.ts"/> 
///<reference path="./ABN/ABN.ts"/> 

import {bootstrap, Component, View, bind, Inject} from 'angular2/angular2'; 
import { 
ROUTER_DIRECTIVES, 
ROUTER_PROVIDERS, 
RouteConfig 
, ROUTER_BINDINGS, RouterLink, RouterOutlet, Route, 
LocationStrategy, HashLocationStrategy} from 'angular2/router'; 

/* Importing Application Components */ 
import { BusinessNameLookup } from './BusinessNameLookup/BusinessNameLookup.ts'; 
import { ABN } from './ABN/ABN.ts'; 
import { LookupDetails } from './LookupDetails/LookupDetails.ts'; 
import { Businessnames } from './BusinessNames/BusinessNames.ts'; 
import { BusinessWebAddress } from './BusinessWebAddress/BusinessWebAddress.ts'; 
import { BusinessCategory } from './BusinessCategory/BusinessCategory.ts'; 
import { ContactInformations } from './ContactInformations/ContactInformations.ts'; 
import { BusinessPurchaseAddress } from './BusinessPurchaseAddress/BusinessPurchaseAddress.ts'; 
import { BusinessImages } from './BusinessImages/BusinessImages.ts'; 
import { SurveyQuery } from './SurveyQuery/SurveyQuery.ts'; 
/* Importing Application Components */ 

import { BusinessModel } from './DataModels/BusinessModel.ts'; 

@Component({ 
    selector: 'app' 
}) 

@View({ 
     template: `<router-outlet></router-outlet>`, 
     directives: [RouterOutlet, RouterLink, ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
     new Route({ path: '/', component: BusinessNameLookup }), 
     new Route({ path: '/ABN', component: ABN, name: 'ABN' }), 
     new Route({ path: '/LookupDetails', component: LookupDetails, name: 'LookupDetails' }), 
     new Route({ path: '/BusinessNames', component: Businessnames, name: 'BusinessNames' }), 
     new Route({ path: '/BusinessWebAddress', component: BusinessWebAddress, name: 'BusinessWebAddress' }), 
     new Route({ path: '/BusinessCategory', component: BusinessCategory, name: 'BusinessCategory' }), 
     new Route({ path: '/ContactInformations', component: ContactInformations, name: 'ContactInformations' }), 
     new Route({ path: '/BusinessPurchaseAddress', component: BusinessPurchaseAddress, name: 'BusinessPurchaseAddress' }), 
     new Route({ path: '/BusinessImages', component: BusinessImages, name: 'BusinessImages' }), 
     new Route({ path: '/SurveyQuery', component: SurveyQuery, name: 'SurveyQuery' }) 
]) 

class AppComponent { 
} 

bootstrap(AppComponent, [ROUTER_BINDINGS, bind(LocationStrategy).toClass(HashLocationStrategy)]); 

當我寫它時,會導航到主頁並在<router-outlet>屬性中查看它。 不,我一直把this.router.parent.navigate(['/ABN']);

這行我把它放到按鈕調用的函數。 問題開始欺騙我按下這個按鈕,我已經瀏覽到,而另一個頁面,然後再返回到主頁並顯示問號在URL http://localhost:5000/?其也消失也。

回答

2

這似乎是一個問題時處理導航事件<button>位於<form>元素

內部。例如:

//Component function 
gotoAnotherRoute() { 
    this._router.navigate(['/another-route']); 
}  

此模板將刷新頁面,並添加一個問號在URL中

<form> 
    <input [(ngModel)]="model.name"/> 
    <button (click)="gotoAnotherRoute()">Validate</button> 
</form> 

此模板將按​​預期正常工作和路由。

<form> 
    <input [(ngModel)]="model.name"/> 
</form> 
<button (click)="gotoAnotherRoute()">Validate</button> 
+0

這是一個真正的錯誤嗎?或者這種行爲總之有意義。謝謝。 – Johannes

+0

不確定它是否是一個真正的錯誤,因爲HTML表單的標準行爲是通過「submit」類型的輸入來提交的,或者如果沒有提交類型的話,表單中的第一個按鈕將被提交... –

1

導航後只返回false。

//Component function 
gotoAnotherRoute() { 
    this._router.navigate(['/another-route']); 
    return false; 
}  
+0

這個工作 - 但爲什麼這是必要的? –