I am using angular2-webpack-starter, As Route is not that standard yet in the "2.0.0-rc.1", they are using @angular/route-depricated for routing purposes. Now
This is my Service
@Injectable()
export class JSTreeService {
constructor(private http: Http) {
}
// Uses http.get() to load a single JSON file
getData(): Observable<IDataItem[]> {
return this.http.get('url')
.map((res: Response) => res.json());
}
}
This is my Main Component where I subscribed the service and passed it to another service to pass it to other components
@Component({
selector: 'app',
pipes: [],
providers: [JSTreeService, HTTP_PROVIDERS, SharedData],
directives: [],
encapsulation: ViewEncapsulation.None,
template: `
<header>
<md-toolbar color="primary">
<span>{{ name }}</span>
<nav>
<ul>
<li router-active>
<a [routerLink]=" ['Index'] ">Index</a>
</li>
|
<li router-active>
<a [routerLink]=" ['Home'] ">Home</a>
</li>
|
<li router-active>
<a [routerLink]=" ['About'] ">About</a>
</li>
|
<li router-active>
<a [routerLink]=" ['Items'] ">Items</a>
</li>
</ul>
</nav>
</md-toolbar>
</header>
<md-progress-bar mode="indeterminate" color="primary" *ngIf="loading"></md-progress-bar>
<main>
<router-outlet></router-outlet>
</main>
})
@RouteConfig([
{ path: '/', name: 'Index', component: Home, useAsDefault: true },
{ path: '/home', name: 'Home', component: Home },
{ path: '/item', name: 'Items', component: ItemComponent },
// Async load a component using Webpack's require with es6-promise-loader and webpack `require`
{ path: '/about', name: 'About', loader: () => require('es6-promise!./about')('About') }
])
export class App {
dataItem: IDataItem[];
// @Input() flag
constructor(
public appState: AppState,
private _itemData: JSTreeService,
private _sharedData: SharedData) {
}
getData() {
this._itemData.getData()
.subscribe(
// the first argument is a function which runs on success
(data: IDataItem[]) => {
this.dataItem = data;
},
// the second argument is a function which runs on error
err => console.error(err),
// the third argument is a function which runs on completion
() => (this._sharedData.dataItem = this.dataItem)
);
this.flag = 1;
}
ngOnInit() {
console.log('Initial App State', this.appState.state);
console.log('hello `Item` component');
this.getData();
}
}
This is my route component
@Component({
selector: 'Item',
template: require('./item.html'),
providers: [
]
})
export class ItemComponent {
dataItem: IDataItem[];
flag: number;
constructor(private _sharedData: SharedData) {
}
ngOnInit() {
// console.log(this.dataItem);
this.dataItem = this._sharedData.dataItem;
}
ngOnDestroy() {
// this.dataItem = this._sharedData.dataItem;
}
}
This is the SharedService
@Injectable()
export class SharedData {
constructor() {
}
dataItem:IDataItem[];
}
Here is my item.template
<div class="">
<label *ngFor="let item of dataItem"> <input type="checkbox" name="checkbox" value="value"> {{item.text}} <br></label>
</div>
I can successfully pass the data from appcomponent to 'ItemComponent'. So whenever I load my app it subscribes the http call and pass the data to SharedService. And when I Click Item it routes to ItemComponent, it shows the data. Now my problem is Every time I route to Item, every time it recreates the ItemComponent so my data goes away. And I dont want it. I want to store the state of that component. And is this a good way to pass data between components. I am a novice in Angular2 , any kind of help will be appreciated :) My Updated ItemComponent :
@Component({
selector: 'Item',
template: require('./item.html'),
providers: [
// JSTreeService,
]
})
export class ItemComponent implements CanReuse, OnReuse {
dataItem: IDataItem[];
flag: number;
constructor(private _sharedData: SharedData) {
// this.dataItem = params.get('dataitems');
}
ngOnInit() {
// console.log(this.dataItem);
this.dataItem = this._sharedData.dataItem;
}
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
return true;
}
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
// this.name = next.params['name'];
this.dataItem = this._sharedData.dataItem;
console.log(this.dataItem);
}
ngOnDestroy() {
// this.dataItem = this._sharedData.dataItem;
}
}
And yes I am using @angular/router-depricated from webpackstarter kit
