私は angular2-webpack-starter を使用しています。Route は「2.0.0-rc.1」ではまだ標準ではないため、ルーティングの目的で @angular/route-depricated を使用しています。今
これは私のサービスです
@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());
}
}
これは、サービスをサブスクライブし、それを別のサービスに渡して他のコンポーネントに渡すメイン コンポーネントです。
@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();
}
}
これは私のルートコンポーネントです
@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;
}
}
これが共有サービスです
@Injectable()
export class SharedData {
constructor() {
}
dataItem:IDataItem[];
}
ここに私のitem.templateがあります
<div class="">
<label *ngFor="let item of dataItem"> <input type="checkbox" name="checkbox" value="value"> {{item.text}} <br></label>
</div>
appcomponent から 'ItemComponent' にデータを正常に渡すことができます。したがって、アプリをロードするたびに、http 呼び出しをサブスクライブし、データを SharedService に渡します。Item をクリックすると、ItemComponent にルーティングされ、データが表示されます。今私の問題は、Item にルーティングするたびに、ItemComponent を再作成するたびにデータが消えることです。そして、私はそれを望んでいません。そのコンポーネントの状態を保存したい。そして、これはコンポーネント間でデータを渡す良い方法ですか。私は Angular2 の初心者です。あらゆる種類のヘルプをいただければ幸いです:) 私の更新された 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;
}
}
はい、私は webpackstarter kit から @angular/router-depricated を使用しています