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

【问题标题】：Routes for same component with nested others具有嵌套其他组件的相同组件的路由
【发布时间】：2016-06-21 06:40:02
【问题描述】：

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

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

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

这是一个图表：

所以，当我单击 wikis 表的一行时，界面如下所示：

所有这个系统都可以工作。但是，如果我切换到带有router.navigate 的新wiki，它也会重新加载我的wikis 表。（之前已经加载）。

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

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

谢谢！

编辑：

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

这是 wikis 索引组件（它包括表格，在这里没用）：

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}]);
    }
}

【问题讨论】：

请添加演示您尝试过的代码。
感谢 Gunter，我的主要代码已经过去了。
我很难理解这意味着什么“因为我不知道我需要做什么才能从同一个“RootComponent”设置路由器，但无需重新加载所有内容。”如果您将 URL 提供给朋友并重新加载所有内容，为什么会出现问题？
嗯，是的，没关系。我解释得更好（稍后编辑）。如果我更改当前 wiki 以显示详细信息，我会调用 _router.navigate()（使用新的 wiki slug），此时，它会重新加载主组件中的所有内容。
你在哪里称这个_router.navigate() 以及使用什么参数？我在您的代码中找不到它。

标签： routing nested components angular

【解决方案1】：

我猜

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

是您想要的，而 return true; 可能会因某些标准而异。如果返回true，则组件将被重用而不是重新创建。

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

【讨论】：

谢谢，这正是我想要的！！