如何使用兒童路由來填充家長RouterOutlet在我的應用程序的角度2

Question

主頁只是

<router-outlet></router-outlet> 

和類看起來是這樣的：

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

export class AppHome { 
    constructor(private router: Router) {} 
} 

它得到通過填充啓動屏幕的默認路由，其中​​包含一個搜索框。這部分的工作，直到我想做更多...

點擊搜索，它觸發了啓動畫面類此功能：

@RouteConfig([ 
    {path:'/...', name: 'Results', component: Results} 
]) 


export class StartScreen{ 
    private router : Router 

    constructor(router: Router) 
     this.router = router; 
    } 

    search(input) { 
     this.data.search(input); 
     this.router.parent.navigate(['Results']); 
    } 
} 

開始屏幕不具有它自己的RouterOutlet。我實際上想要「結果」模板來替換開始屏幕並填充主頁的RouterOutlet。

我在正確的軌道上，我的問題是由於其他語法錯誤，或者我錯誤地解決它？

Answer 1

你可能想嘗試兒童路線。

EG。在AppHome組件，改變@RouteConfig爲類似

@RouteConfig([ 
    {path:'/startscreen/...', name: 'StartScreen', component: StartScreen, useAsDefault: true} 
]) 

而且，在StartScreen組件，定義@RouteConfig像

@RouteConfig([ 
    {path:'/result1', name: 'Result1', component: Result1}, 
    {path:'/result2', name: 'Result2', component: Result2}, 
    //and something like that 
]) 

另請參閱

How to use child routes in Angular 2

Answer 2

我最終什麼這是...

在AppHome水平，主要有兩種觀點，可以填充RouterOutlet：

@RouteConfig([ 
    {path:'/', name: 'StartScreen', component: StartScreen, useAsDefault: true}, 
    {path:'/Results/...', name: 'Results', component: Results} 
]) 

當搜索在StartScreen DOM觸發，觸發上方的搜索功能，該路線Results，它有自己的一套的路線：

search(input) { 
    this.data.search(input); 
    this.router.parent.navigate(['Results']); 
}