具有嵌套其他组件的相同组件的路由

Question

经过数小时的研究和测试，我来到这里可能找到了解决方案。

所以，我解释一下我的问题。

比如我有一个组件"WikisComponent"。在他里面，我调用一个"CategoriesComponent"来显示所有类别（来自API）。在 WikisComponent 中，我有它们的列表。在 WikisComponent 内部，我有一个 WikiDetailComponent（当用户单击其中一个列表时）。

这是一张图表：

因此，当我单击维基的一行时 table，界面如下所示：

所有这个系统都能正常工作。但是，如果我切换到带有 router.navigate 的新维基，它也会重新加载我的维基 table。（之前已经加载过）。

例如，如果我有一条路线 /wikis => 显示 wiki table（带有类别列表）。 /wikis/my-super-wiki，如果我设置 routerLink=Wikis/WikiDetail，它会重新加载我的维基 table。

我不知道你是否需要更精确，很难解释我的问题。抱歉我的英语不好！

谢谢！

编辑 :

有我的 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{
}

这是 wiki 索引组件（它包括 table，在这里没有用）：

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

具有嵌套其他组件的相同组件的路由

Routes for same component with nested others

routing

components

nested

angular