嵌套其他組件的路線

Question

經過數小時的研究和測試，我來到這裏可能會找到解決方案。

所以，我解釋我的問題。

例如，我有一個組件「WikisComponent」。 在他內部，我稱之爲「CategoriesComponent」以顯示所有類別（來自API）。 在WikisComponent中，我有它們的列表。 在WikisComponent內部，我有一個WikiDetailComponent（當用戶點擊其中一個列表時）。

下面的示意圖：

所以，當我點擊維基表中的行，界面看起來像：

所有這些系統的工作。但是，如果我使用router.navigate切換到新維基，它也會重新加載我的維基表。 （之前已經加載）。

例如，如果我有路線 /wikis =>顯示維基表（帶類別列表）。 和/wikis/my-super-wiki，如果我設置了routerLink=Wikis/WikiDetail，它會重新加載我的維基表。

我不知道你是否需要更高的精度，這很難解釋我的問題。 對不起，我的英語不好！

謝謝！

編輯：

還有就是我WikisComponent（我RootComponent）：

import {Component, Input} from "angular2/core"; 
import {RouteConfig, RouterOutlet, RouterLink} from "angular2/router"; 

import {WikisIndexComponent} from "./components/index"; 

@Component({ 
    selector: 'wikis-component', 
    template: ` 
     <div class="pull-right"> 
      <a href="" [routerLink]="['/Invoices/InvoicesCreate']" class="btn btn-success">Ajouter un wiki</a> 
     </div> 

     <h3 class="page-header">Wikis</h3> 
     <router-outlet></router-outlet> 
    `, 
    directives: [RouterOutlet, RouterLink] 
}) 
@RouteConfig([ 
    {path: '/', component: WikisIndexComponent, name: 'WikisIndex', useAsDefault: true}, 
    {path: '/:slug', component: WikisIndexComponent, name: 'WikiDetail'}, 
]) 
export class WikisComponent{ 
} 

這是維基百科索引組件（它包括表，而不是在這裏有用）：

import {Component} from "angular2/core"; 
import {RouteParams, Router} from "angular2/router"; 
import {WikisService} from "../services/wikis"; 
import {WikisListComponent} from "./partials/list"; 
import {WikiShowComponent} from "./partials/show"; 
import {WikisCategoriesListComponent} from "../categories/components/list"; 

@Component({ 
    selector: 'wikis-index', 
    template: ` 
     <wikis-categories class="col-md-2"></wikis-categories> 

     <div class="col-md-10"> 
      <div [class.col-md-12]="!slugWikiSelected" [class.col-md-3]="slugWikiSelected"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">  
         <h5> 
          Liste des wikis <small>({{wikis?.length}})</small> 
         </h5> 
        </div> 

        <div class="panel-body panel-body-no-padding"> 
         <wikis-list *ngIf="wikis" (wikiSelectedEvent)="setWikiSelected($event)" [wikis]="wikis"></wikis-list> 
        </div> 
       </div> 
      </div> 

      <div class="col-md-9" *ngIf="slugWikiSelected"> 
       <wiki-show [wikiSlug]="slugWikiSelected" (unselectWikiEvent)="wikiSelected = null"></wiki-show> 
      </div> 
     </div> 
     `, 
    directives: [WikisListComponent, WikiShowComponent, WikisCategoriesListComponent] 
}) 
export class WikisIndexComponent{ 
    private wikis; 
    private slugWikiSelected; 

    constructor(private _routeParams: RouteParams, private _wikisService: WikisService, private _router: Router){ 
    } 

    ngOnInit(){ 
     let slug = this._routeParams.get('slug'); 

     if(slug){ 
      this.slugWikiSelected = slug; 
     } 

     this.getAllWikis(); 
    } 

    getAllWikis(){ 
     this._wikisService.all().subscribe(res => this.wikis = res.data); 
    } 

    setWikiSelected(wiki){ 
     this._router.navigate(['/Wikis/WikiDetail', {slug : wiki.slug}]); 
    } 
} 

Answer 1

我猜

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; } 

是你想要的，而return true;可能會在一些標準上有所不同。 如果返回true，組件將被重用，而不是重新創建。

另請參見https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html