कोणीय 2 सिंगलटन सेवा सिंगलटन

Question

के रूप में कार्य नहीं कर रही है इसलिए मुझे TargetService नामक एक सेवा मिली है जो विभिन्न अन्य घटकों में इंजेक्शन दे रही है। इस लक्ष्य सेवा में Targets नामक एक संपत्ति है जो Target ऑब्जेक्ट्स का संग्रह है।

मेरी समस्या यह है कि मैं चाहता हूं कि यह संग्रह दूसरे दृश्य में रूटिंग के बाद बने रहें। मेरे मार्ग ठीक काम कर रहे हैं, लेकिन जैसे ही मार्ग बदलता है, सेवा किसी भी चर की सामग्री को खो देती है, अनिवार्य रूप से, यह सेवा को फिर से शुरू करने के लिए। मेरी समझ यह थी कि इन इंजेक्शन सेवाओं को सिंगलेट्स होना चाहिए जिन्हें चारों ओर पारित किया जा सकता है?

निम्न उदाहरण में, लक्ष्य इंडेक्स पर मैं एक बटन क्लिक करता हूं जो सेवा पर Targets[] ऑब्जेक्ट को पॉप्युलेट करता है (this.targetService.targets = ts;)। ठीक काम करता है, फिर मैं लक्ष्यशो पेज पर जाता हूं, और उसके बाद इस सूचकांक पर वापस जाता हूं और अब यह Targets[] संपत्ति खाली है, जब मैं इसे पहले से ही पॉप्युलेट करना चाहता हूं।

मुझे यहां क्या याद आ रही है?

App.Module

const routes: Routes = [ 
    { path: '', redirectTo: 'targets', pathMatch: 'full'}, 
    { path: 'targets', component: TargetIndexComponent }, 
    { path: 'targets/:id', component: TargetShowComponent } 
] 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    TargetComponent, 
    TargetIndexComponent, 
    TargetShowComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 
    RouterModule.forRoot(routes) 
    ], 
    providers: [TargetService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

TargetService

@Injectable() 
export class TargetService { 
    public targets: Target[]; 

    constructor(private http: Http) {} 

    getTargets(hostname: String): Observable<Target[]> { 
    return this.http.request(`url`).map(this.extractData); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body || []; 
    } 

} 

TargetIndex

@Component({ 
    selector: 'app-targets', 
    templateUrl: './target-index.component.html', 
    styleUrls: ['./target-index.component.css'], 
    providers: [TargetService] 
}) 
export class TargetIndexComponent implements OnInit { 
    loading = false; 

    constructor(private http: Http, private targetService: TargetService) {} 

    loadTargets(hostname: HTMLInputElement) { 
    this.loading = true; 
    this.targetService.getTargets(hostname.value) 
    .subscribe((ts: Target[]) => { 
     this.targetService.targets = ts; 
     this.loading = false; 
    }) 
    } 

    ngOnInit() { 
    } 

} 

घटकों प्रदाताओं से TargetService दूर करने के लिए TargetShow

@Component({ 
    selector: 'app-target-show', 
    templateUrl: './target-show.component.html', 
    styleUrls: ['./target-show.component.css'], 
    providers: [TargetService] 
}) 
export class TargetShowComponent implements OnInit { 
    id: string 

    constructor(private route: ActivatedRoute, private targetService: TargetService) { 
    route.params.subscribe(params => { this.id = params['id']; }) 
    } 

    ngOnInit() { 
    } 

} 

Answer 1

प्रयास करें, क्योंकि आप पहले से ही मॉड्यूल प्रदाताओं में जोड़ा। जब आप घटक सेवा प्रदाताओं को यह सेवा जोड़ते हैं, तो DI इसके नए उदाहरण बनाता है।

जब NgModule उपयोग करने के लिए और जब एक आवेदन घटक:

यहाँ https://angular.io/docs/ts/latest/guide/dependency-injection.html से उद्धरण है? एक ओर, एक NgModule में एक प्रदाता रूट इंजेक्टर में पंजीकृत है। इसका मतलब है कि एक NgModule के भीतर पंजीकृत प्रत्येक प्रदाता पूरे एप्लिकेशन में पहुंच योग्य होगा।

दूसरी तरफ, एक आवेदन घटक में पंजीकृत एक प्रदाता केवल उस घटक और उसके सभी बच्चों पर उपलब्ध है।