angular - What is the Correct Syntax for navigate to a Child Route using "this._router.navigate(['Results'])" -


i found lot of answers used [routerlink] navigation child components, not using "this._router.navigate(['result'])"

here code,app.component.ts

import {component} 'angular2/core';      import {router, routeconfig, router_directives, routeroutlet}    'angular2/router'; import {searchcomponent} './search/search' import {attractioncomponent} './attraction/attraction' import {profilecomponent} './profile/profile'  @component({   selector: 'interest-app',   templateurl: 'views/home.html',   directives: [router_directives, routeroutlet] })   @routeconfig([ {    path: '/search/...',   name: 'searchhotel',   component: searchcomponent,   useasdefault: true 

search.ts

import {component} 'angular2/core'; import {router,routeconfig,router_directives} 'angular2/router'; import {resultscomponent} '../results/results';  @component({   templateurl: 'views/search.html',   directives: [router_directives] })  @routeconfig([ {      path: '/results/...',     name: 'results',     component: resultscomponent,     useasdefault: true  }  ]) export class searchcomponent {    constructor(private _router: router) {     console.log('child component',_router);   }    private viewresult() {     this._router.navigate(['results']);   }    } 

its work fine when use useasdefault: true, when call "viewresult()" got error

original exception: link "["results"]" not resolve terminal instruction 

so want know possible route child components using this.route.navigate instead using [routerlink].if want know correct syntax.

results.ts

import {component} 'angular2/core'; import {router,routeconfig,router_directives} 'angular2/router'; import {hotelcomponent} '../hotel/hotel';  @component({ templateurl: 'views/results.html', directives: [router_directives]})  @routeconfig([ {      path: '/hotel',     name: 'hotel',     component: hotelcomponent         }     ])  export class resultscomponent {   constructor(private _router:router)  {  }   private viewhotel() {     this._router.navigate(['hotel']); } } 

  • you need either remove /...

    path: '/results/...',

to

   path: '/results', 

  • add useasdefault:true route in resultscomponent
 @routeconfig([{      path: '/hotel',     name: 'hotel',     component: hotelcomponent,     useasdefault: true          }]) 
  • or change navigate command
this._router.navigate(['results', 'hotel']); 

Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -