Köşeli 2 - Paylaşılan Hizmeti Kullanmak

Question

Paylaşılan hizmetler, bileşenler arasındaki iletişim veya açısal 1 eski rootscope kavramının değiştirilmesi gibi pek çok durumu çözmek için en iyi uygulamadır. Benimkini oluşturmaya çalışıyorum ama Çalışma. Herhangi bir yardım ? ty !!!

bootstrap(AppComponent, [ SharedService ]); 

: Başvurunuzu işe koşulması zaman

app.component.ts

import {Component} from 'angular2/core'; 
import {OtherComponent} from './other.component'; 
import {SharedService} from './services/shared.service'; 
@Component({ 
selector: 'my-app', 
providers: [SharedService], 
directives: [OtherComponent], 
template: ` 
    <button (click)="setSharedValue()">Add value to Shared Service</button> 
    <br><br> 
    <other></other> 
` 
}) 
export class AppComponent { 
data: string = 'Testing data'; 
setSharedValue(){ 
    this._sharedService.insertData(this.data); 
    this.data = ''; 
    console.log('Data sent'); 
} 
constructor(private _sharedService: SharedService){} 
} 

other.component.ts

import {Component, OnInit} from "angular2/core"; 
import {SharedService} from './services/shared.service'; 
@Component({ 
selector : "other", 
providers : [SharedService], 
template : ` 
I'm the other component. The shared data is: {{data}} 
`, 
}) 
export class OtherComponent implements OnInit{ 
data: string[] = []; 
constructor(private _sharedService: SharedService){} 
ngOnInit():any { 
    this.data = this._sharedService.dataArray; 
} 
} 

Answer 1

Çoğu zaman

, kendi paylaşılan hizmet tanımlamanız gerekir

ve bileşenlerinizi providers özniteliğinde yeniden tanımlama. Bu şekilde, tüm uygulama için tek bir hizmet örneğine sahip olacaksınız. OtherComponent beri durumda

---

, senin AppComponent biri bir alt bileşeni olan, sadece böyle providers niteliği kaldırmak:

@Component({ 
    selector : "other", 
    // providers : [SharedService], <---- 
    template : ` 
    I'm the other component. The shared data is: {{data}} 
    `, 
}) 
export class OtherComponent implements OnInit{ 
    (...) 
} 

ikisi için aynı hizmet örneğini paylaştı olacaktır Bu şekilde bileşenler. OtherComponent, ana bileşenden birini kullanır (AppComponent).

Bu, Angular2'nin "hiyerarşik enjektörleri" özelliğinden kaynaklanır. o zaman her bir bileşenin bu sağlayıcıyı eklemek için ihtiyacım yok,

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

Answer 2

Sen modülünde bir küresel sağlayıcı eklemek gerekir: Daha fazla ayrıntı için bu soruya bakın. Bu

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule], 
    declarations: [AppComponent, LoginComponent, InComponent], 
    providers: [LoginService], 
    bootstrap: [AppComponent] 
}) 

app.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    constructor(public loginService: LoginService) { 

    } 
} 

login.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'login', 
    templateUrl: './login.component.html' 
}) 
export class LoginComponent { 

    constructor(public loginService: LoginService) { 

    } 
} 

sizin için bu işi umut app.module.ts deneyin.