使用 "this._router.navigate(['Results'])" 导航到子路由的正确语法是什么

Question

我发现很多答案使用 [routerLink] 导航到子组件，但没有使用 "this._router.navigate(['Result'])"

这是我的代码，app.component.ts

import {Component} from 'angular2/core';     
import {Router, RouteConfig, ROUTER_DIRECTIVES, RouterOutlet} from    'angular2/router';
import {SearchComponent} from './search/search'
import {AttractionComponent} from './attraction/attraction'
import {ProfileComponent} from './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} from 'angular2/core';
import {Router,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {ResultsComponent} from '../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']);
  }   
}

当我使用 useAsDefault: true 时它工作正常，但是当我调用 "viewresult()" 时出现此错误

ORIGINAL EXCEPTION: Link "["Results"]" does not resolve to a terminal instruction

所以我想知道是否可以使用 this.route.navigate 而不是 [routerLink] 路由到子组件。如果我想知道正确的语法。

results.ts

import {Component} from 'angular2/core';
import {Router,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {HotelComponent} from '../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']);
} }

Answer 1

• 您需要从

  中删除 /...

  路径：'/results/...',

到

   path: '/results',

• 将 useAsDefault:true 添加到 ResultsComponent
中的路线

 @RouteConfig([{ 
    path: '/hotel',
    name: 'Hotel',
    component: HotelComponent,
    useAsDefault: true        
 }])

• 或将您的导航命令更改为

this._router.navigate(['Results', 'Hotel']);