Question

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

所以，我解释了我的问题。

例如，我有一个组件＆＃34; WikisComponent＆＃34;。在他的内心，我打电话给＆＃34; CategoriesComponent＆＃34;显示所有类别（来自API）。在WikisComponent中，我有它们的列表。在WikisComponent中，我有一个WikiDetailComponent（当用户点击其中一个列表时）。

这是一张图：

因此，当我点击wiki表的一行时，界面如下所示：

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

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

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

谢谢！

编辑：

有我的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的索引组件（它包括表，这里没用）：

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

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

1 个答案: