Question

我试图弄清楚Angular2的路由器的OnReuse和CanReuse部分，我正在撞墙。我在文档here之后对我的代码建模，但由于某种原因，我无法在路由更改时获取调用方法。不知道我做错了什么。这是我的代码：

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) {

    }

}

产品table.component.ts

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

Answer 1

我认为文档不够清晰，或者我们只是查找错误的文档。

如果路由器导航到不同类型的组件，Angular将不会认为组件是可重用的。以下说明摘自Angular的source

[router-outlet＆＃39的重用方法]在导航的识别阶段由{@link Router}调用。如果新子组件具有不同类型而不是现有组件子组件，这将解析为false。你不能重复使用旧的当新组件具有不同类型时的组件。否则，此方法委托给子组件如果它存在，则routerCanReuse挂钩，如果挂钩，则解析为true 不存在。

您可能永远不会从ProductTable导航到ProductTable。所以永远不会调用CanReuse钩子。但您可以尝试在ProductDetail等组件中重复使用策略，您可以从一个项目的详细信息导航到下一个项目的详细信息。

路由更改时不调用routerCanReuse和routerOnReuse

1 个答案: