Issue With Router.Parent.Navigate()

Question

I'm facing a Issue with router.parent.navigate In Angular 2. And I don't know if this is Issue with Angular or something wrong with my code.
When I have parent Component App.ts which content config for routing and host all views.

///<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)]);

As I write it this navigate me to Home page and view it in <router-outlet> attribute. No I have been putting this.router.parent.navigate(['/ABN']);

This line I put it into function which called by button. The issue start wile I press this button I have been navigated to the other page for while and back again to the home page and show question mark symbol in URL http://localhost:5000/? and its also disappear also.

Answer 1

This seems to be an issue when the <button> that handle the navigation event is located inside a <form> element

For example :

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

This template will refresh the page and add a question mark symbol in the URL

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

This template will work properly and route as expected.

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