I am currently exploring the functionalities of Angular2's Router, specifically focusing on OnReuse and CanReuse. I have followed the documentation provided here, but I seem to be encountering difficulties in getting the methods to trigger when the route changes. I am unsure where I might have made a mistake. Below is the code snippet that I have implemented:
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
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'];
}
}