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 inresultscomponent
@routeconfig([{ path: '/hotel', name: 'hotel', component: hotelcomponent, useasdefault: true }])
- or change navigate command
this._router.navigate(['results', 'hotel']);
Comments
Post a Comment