कोणीय 2 वैश्विक सेवा प्रदाता

Question

/app 
     - app.component.ts 
     - app.component.html (hide/show: menu bar) 
     - app.global.service.ts (Public varible LoginSuccess:boolean) 
     - main.ts 
     /student 
      - student.ts 
      - student.service.ts 
      - student.component.ts 
      - student.component.html 
     /security 
      - login.component.ts (LoginSuccess = true) 
      - login.component.html 

कोणीय 2 के मेरे आवेदन में, मुझे एक साधारण आवश्यकता है जहां मैं लॉगिन सफलता के आधार पर छुपा मेनू बार दिखाना चाहता हूं। इसके लिए मैंने एक सेवा बनाई है जिसमें सिर्फ एक लॉगिनस्यूप बूलियन वैरिएबल है, जिसे मैं लॉगिन घटक पर सेट करूंगा और [hidden]=LoginSuccess एनएवी टैग के लिए app.component.html पर उपयोग करूंगा।

समस्या का सामना करना पड़ रहा हूँ के माध्यम से app.component.ts & login.component.ts मूल्य की constructor बने नहीं है और प्रत्येक निर्माता app.global.service.ts की नई वस्तु बनाने app.global.service.ts इंजेक्शन लगाने के बाद भी है।

प्रश्न: मैं सेवा के माध्यम से आवेदन के दौरान एकल मूल्य को बनाए रखने के लिए कैसे प्राप्त कर सकता हूं। Angular2 दस्तावेज़ों में कहीं, मैंने पढ़ा था कि इंजेक्शन योग्य सेवा सिंगलटन है।

Answer 1

आप बूटस्ट्रैप पर GlobalService प्रदान करना चाहिए, नहीं प्रत्येक घटक के लिए:

bootstrap(AppComponent, [GlobalService]) 

@Component({ 
    providers: [], // yes 
    // providers: [GlobalService], // NO. 
}) 
class AppComponent { 
    constructor(private gs: GlobalService) { 
    // gs is instance of GlobalService created at bootstrap 
    } 
} 

इस तरह GlobalService एक सिंगलटन हो जाएगा।

अधिक उन्नत दृष्टिकोण के लिए this answer देखें।

Answer 2

सक्ससा के रूप में, मुख्य बिंदु एप्लिकेशन इंजेक्टर के भीतर अपने सेवा प्रदाता को परिभाषित करना है, न कि प्रत्येक घटक स्तर पर। सावधान रहें कि सेवा प्रदाता को दो बार परिभाषित न करें ... अन्यथा आपके पास अभी भी अलग-अलग सेवा उदाहरण होंगे।

इस तरह आप सेवा का एक ही उदाहरण साझा करने में सक्षम होंगे।

यह व्यवहार Angular2 के पदानुक्रमित इंजेक्टरों के कारण होता है।

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

अंतिम रिलीज (कोणीय 2.0.0) के रूप में: अधिक जानकारी के लिए, तो आप इस सवाल पर एक नज़र हो सकता था

आयात सेवा और प्रदाताओं में यह इंजेक्षन इसलिए जैसी सरणी:

import { GlobalService } from './app.global.service'; 

//further down: 
@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ 
    // Your components should go here 
    ], 
    imports: [ 
    // Your module imports should go here 
    ], 
    providers: [ 
    ENV_PROVIDERS // By Angular 
    // Your providers should go here, i.e. 
    GlobalService 
    ] 
}); 

Answer 4

आप एक app.component.ts है और boostrapping के बजायके अंदर होना चाहिए 210 आप app.component.ts में सेवा इंजेक्ट करते हैं।

... 
import { MusicService } from './Services/music-service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    providers: [MusicService], 
    ... 
}) 
export class AppComponent { 

constructor(private MS: MusicService) { 

} 
... 

यह वर्तमान Angular2 निर्माण बंद आधारित है। तो index.html के अंदर आपके पास <app-root> होना चाहिए जहां AppComponent लोड हो गया है।

अब किसी अन्य घटक उपयोग के अंदर इसका इस्तेमाल करने के लिए बस इसे आयात:

import { MusicService } from './Services/music-service'; 

और प्रारंभ यह:

constructor(private MS: MusicService) { 

} 

सारांश:

1. app.component.ts
2. सम्मिलित में आयात करें app.component.ts के रूप में एक provider
3. निर्माता में प्रारंभ
4. हर दूसरे घटक उपयोग के लिए दोहराएँ कदम 2,3 में उपयोग करना चाहते हैं

संदर्भ: Angular Dependency Injection

Answer 5

मैं बस, जोड़ देगा क्योंकि मैं इस पर फंस गया था इंगित करें, हालांकि मैंने सिंगलटन का उपयोग किया था, आपको अंगुलर रूटिंग रणनीति का भी उपयोग करना होगा:

आप href = "../ my-route"

का उपयोग नहीं कर सकते

बजाय आप का उपयोग करने के लिए है:

कारण इस पूरे आवेदन नया शुरू होता है routerLink = "../ मेरे मार्ग"