更改路由时不调用routerCanReuse和routerOnReuse [英] routerCanReuse and routerOnReuse is not called when route changes

问题描述

我试图弄清楚Angular2路由器的OnReuse和CanReuse部分，但是我碰壁了.我在docs 此处处对代码进行建模，但对于由于某种原因，路线更改时我无法获取要调用的方法.不知道我在做什么错.这是我的代码:

I am trying to figure out the OnReuse and CanReuse parts of Angular2's Router and I'm hitting a wall. I modeled my code after the docs here, but for some reason I can't get the methods to call when the route changes. Not sure what I'm doing wrong. Here's my code:

app.component.ts

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

    }

}

product-table.component.ts

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

推荐答案

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

I think the docs are not clear enough, or we just looked up a wrong doc.

如果路由器导航到其他类型的组件，Angular不会认为该组件是可重用的.以下说明摘自Angular的来源

Angular will not consider a component is resusable if router navigates to a component of different type. The following explanation is extracted from Angular's source

[路由器出口的重用方法]在导航的识别阶段由{@link Router}调用. 如果新的子组件具有与现有组件不同的不同类型 子组件，它将解析为false.你不能重用旧的 新组件的类型不同时的组件. 否则，此方法将委派给子组件的 routerCanReuse挂钩(如果存在)，或者如果挂钩为，则解析为true 不存在.

[router-outlet's reuse method is ]Called by the {@link Router} during recognition phase of a navigation. If the new child component has a different Type than the existing child component, this will resolve to false. You can't reuse an old component when the new component is of a different Type. Otherwise, this method delegates to the child component's routerCanReuse hook if it exists, or resolves to true if the hook is not present.

很可能您永远不会从ProductTable导航到ProductTable.因此，永远不会调用CanReuse钩子.但是您可以尝试在ProductDetail之类的组件中重用策略，在其中您可以从一项的详细信息导航到下一项的详细信息.

It is likely that you never navigate from ProductTable to ProductTable. So CanReuse hook is never called. But you can try reusing strategy in components like ProductDetail where you will navigate from one item's detail to the next item's detail.

这篇关于更改路由时不调用routerCanReuse和routerOnReuse的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！