मैं कोणीय 2 + Rx.JS 5/अगला का डेमो ऐप एक साथ रखने की कोशिश कर रहा हूं।हर बार जब मैं मार्ग बदलता हूं तो मेरे कोणीय 2 घटक फिर से तत्काल क्यों होते हैं?
मैंने देखा कि जब भी मैं मार्ग स्विच करता हूं तो मेरे घटकों को फिर से चालू किया जाता है।
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";
@Component({
selector: 'my-app',
providers: [AppService, FirstComponent, SecondComponent],
directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
template: `<h1>An Angular 2 App</h1>
<a [routerLink]="['First']">first-default</a>
<a [routerLink]="['Second']">second</a>
<router-outlet></router-outlet>`
})
@RouteConfig([
{path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
{path: '/second', name: 'Second', component: SecondComponent}
])
export class AppComponent {
}
तो पहले घटक (/ को मैप किया) के लिए कोड:
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';
bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);
यहाँ जड़ घटक के लिए कोड है:
यहाँ जड़ अनुप्रयोग के लिए कोड है
import {Component, OnInit, NgZone} from "angular2/core";
import {AppService} from "./app.services.ts";
import 'rxjs/Rx';
@Component({
selector: 'my-first',
template: `
<div>
<ul>
<li *ngFor="#s of someStrings">
a string: {{ s }}
</li>
</ul>
</div>`
})
export class FirstComponent implements OnInit {
zone:NgZone;
constructor(private appService:AppService) {
console.log('constructor', 'first');
this.zone = new NgZone({enableLongStackTrace: false});
}
someStrings:string[] = [];
ngOnInit() {
console.log('ngOnInit', 'first');
this.appService.refCounted.subscribe(
theStrings=> {
this.zone.run(() =>this.someStrings.push(...theStrings));
},
error=>console.log(error)
);
}
}
और दूसरा घटक (/second पर मैप किया गया):
import {Component, OnInit, NgZone} from "angular2/core";
import {AppService} from "./app.services.ts";
@Component({
selector: 'my-second',
template: `
<div>
<ul>
<li *ngFor="#s of someStrings">
a string: {{ s }}
</li>
</ul>
</div>`
})
export class SecondComponent implements OnInit {
zone:NgZone;
constructor(private appService:AppService) {
console.log('constructor', 'second');
this.zone = new NgZone({enableLongStackTrace: false});
}
someStrings:string[] = [];
ngOnInit() {
console.log('ngOnInit', 'second');
this.appService.refCounted.subscribe(
theStrings=> {
this.zone.run(() =>this.someStrings.push(...theStrings));
},
error=>console.log(error)
);
}
}
और अंत में अनुप्रयोग सेवा (थोड़ा कम इस सवाल के लिए प्रासंगिक):
import {Injectable} from "angular2/core";
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import 'rxjs/Rx';
@Injectable()
export class AppService {
constructor(){
console.log('constructor', 'appService');
}
someObservable$:Observable<string[]> = Observable.create(observer => {
const eventSource = new EventSource('/interval-sse-observable');
eventSource.onmessage = x => observer.next(JSON.parse(x.data));
eventSource.onerror = x => observer.error(console.log('EventSource failed'));
return() => {
eventSource.close();
};
});
subject$ = new Subject();
refCounted = this.someObservable$.multicast(this.subject$).refCount();
someMethod_() {
let someObservable$:Observable<string[]> = Observable.create(observer => {
const eventSource = new EventSource('/interval-sse-observable');
eventSource.onmessage = x => observer.next(JSON.parse(x.data));
eventSource.onerror = x => observer.error(console.log('EventSource failed'));
return() => {
eventSource.close();
};
});
return someObservable$;
}
}
तो आदेश First और Second घटकों के इन्स्टेन्शियशन डिबग करने में, मैं में एक console.log जोड़ लिया है कंस्ट्रक्टर्स/ngOnInit:
और मैंने देखा है कि हर बार जब मैं लिंक पर क्लिक करके मार्ग बदलने के लिए, मैं:
constructor first
ngOnInit first
constructor second
ngOnInit second
...
क्या कोई सलाह दे सकता है कि यह व्यवहार की उम्मीद है या नहीं? यदि ऐसा है तो मैं केवल एक बार अपने घटकों को तुरंत चालू करने के लिए Angular2 कैसे प्राप्त कर सकता हूं?
ध्यान दें कि मुझे स्पष्ट रूप से आवश्यक है कि First और Second घटकों को providers सरणी जोड़कर रूट-स्तर घटक पर तुरंत चालू किया जाए।
पीएस https://github.com/balteo/demo-angular2-rxjs/tree/WITH-ROUTER
संपादित:
मैं अब भी इस समस्या का समाधान खोजने के लिए कोशिश कर रहा हूँ यहाँ इस परियोजना के लिए GitHub भंडार है। मुझे राउटर या मेरे घटकों के साथ कुछ गड़बड़ हो रही है। मैंने ऐप को here पर गिटब को धक्का दिया है कि कोई सलाह दे सकता है।
क्या आपको अपना समाधान मिला? –