Typescript 路由更改时不调用routerCanReuse和routerOnReuse

我试图找出Angular2路由器的OnReuse和CanReuse部分，我遇到了麻烦。我根据文档对代码进行建模，但由于某些原因，当路由发生变化时，我无法获取要调用的方法。不知道我做错了什么。这是我的密码：

app.component.ts

import {Component, OnInit, NgZone, View} from 'angular2/core';
import {Location, RouteConfig, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {ProductTable} from './product-table.component';
import {AddProduct} from './add-product.component';

@Component({
    selector: 'app'
})
@RouteConfig([
    { path: '/', name: 'ProductTable', component: ProductTable, useAsDefault: true },
    { path: '/add-product', name: 'AddProduct', component: AddProduct }
])
@View({
    templateUrl: __resourcePath + '/html/app.html',
    directives: [ROUTER_DIRECTIVES, RouterLink]
})
export class AppComponent {

    public __resourcePath = __resourcePath;

    constructor(public location: Location) {

    }

}

import {Component, NgZone} from 'angular2/core';
import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
import {NgClass} from 'angular2/common';

@Component({
    selector: 'product-table',
    templateUrl: __resourcePath + '/html/product-list.html',
    directives: [NgClass]
})
export class ProductTable implements CanReuse, OnReuse {

    public storeProducts: Store_Product__c[] = [];
    public selectedStore: string;
    public selectedCategory: string;
    public errors: { [id: string]: string } = {};


    constructor(private zone: NgZone) {

    }

    routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('routerCanReuse fired');
        return true;
    }

    routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('Reusing!');
        console.log(next);
        this.selectedStore = next.params['selectedStore'];
        this.selectedCategory = next.params['selectedCategory'];
        this.storeProducts = next.params['storeProducts'];
    }
}

product-table.component.ts

import {Component, OnInit, NgZone, View} from 'angular2/core';
import {Location, RouteConfig, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {ProductTable} from './product-table.component';
import {AddProduct} from './add-product.component';

@Component({
    selector: 'app'
})
@RouteConfig([
    { path: '/', name: 'ProductTable', component: ProductTable, useAsDefault: true },
    { path: '/add-product', name: 'AddProduct', component: AddProduct }
])
@View({
    templateUrl: __resourcePath + '/html/app.html',
    directives: [ROUTER_DIRECTIVES, RouterLink]
})
export class AppComponent {

    public __resourcePath = __resourcePath;

    constructor(public location: Location) {

    }

}

import {Component, NgZone} from 'angular2/core';
import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
import {NgClass} from 'angular2/common';

@Component({
    selector: 'product-table',
    templateUrl: __resourcePath + '/html/product-list.html',
    directives: [NgClass]
})
export class ProductTable implements CanReuse, OnReuse {

    public storeProducts: Store_Product__c[] = [];
    public selectedStore: string;
    public selectedCategory: string;
    public errors: { [id: string]: string } = {};


    constructor(private zone: NgZone) {

    }

    routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('routerCanReuse fired');
        return true;
    }

    routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
        console.log('Reusing!');
        console.log(next);
        this.selectedStore = next.params['selectedStore'];
        this.selectedCategory = next.params['selectedCategory'];
        this.storeProducts = next.params['storeProducts'];
    }
}

---

我认为文件不够清楚，或者我们只是查错了文件

<>角如果路由器导航到不同类型的组件，则不考虑组件是可重用的。以下解释摘自Angular的

在导航的识别阶段，{@link router}调用[路由器出口的重用方法]。 如果新子组件的类型与现有组件的类型不同 子组件，这将解析为

false

。你不能重复使用旧的 当新组件属于不同类型时，为组件。 否则，此方法将委托给子组件的

routerCanReuse

hook（如果存在），或者如果hook是 不在场

---

很可能您从未从

ProductTable

导航到

ProductTable

。因此，

CanReuse

hook永远不会被调用。但您可以尝试重用组件中的策略，如

ProductDetail

，在其中您将从一个项目的详细信息导航到下一个项目的详细信息。

无需将

NgClass

添加到指令中

NgClass

默认情况下作为的一部分在全球范围内可用。请确认，您在浏览器控制台中没有收到任何错误？@GünterZöchbauer无任何错误

@View({

最近被删除了。你使用的是什么Angular版本？刚刚意识到我使用的是2.0.0-beta.3。我正在更新和重构一分钟。同样，它看起来也同样令人困惑，所以现在用两个不同的组件不可能做到这一点。也许这可以由DynamicComponentLoader完成。但我不知道。