Eckige 2 - Verwendung Von Shared Service

Sieht aus wie shared services ist die beste Praxis, lösen viele Situationen wie die Kommunikation zwischen Komponenten oder als Ersatz der alten $rootscope Konzept des Winkel-1. Ich versuche zu schaffen, mine, aber es funktioniert nicht. Keine Hilfe ? ty !!!

app.Komponente.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){}
}

anderen.Komponente.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;
}
}
InformationsquelleAutor Marco Jr | 2016-03-27
  1. 9

    Meisten der Zeit, müssen Sie definieren Ihre gemeinsamen Dienst bei der bootstrapping-Anwendung:

    bootstrap(AppComponent, [ SharedService ]);

    und nicht definieren es wieder in die providers Attribut Ihrer Komponenten. Auf diese Weise haben Sie eine einzelne Instanz des service für die gesamte Anwendung.

    In Ihrem Fall, da OtherComponent ist eine sub-Komponente Ihrer AppComponent ein, entfernen Sie einfach die providers - Attribut wie dieses:

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

    Diese Weise werden Sie gemeinsam die gleiche Instanz des Dienstes für beide Komponenten. OtherComponent wird die eine aus der übergeordneten Komponente (AppComponent).

    Dies ist aufgrund der "hierarchischen Injektoren" - Funktion Angular2. Für mehr details, siehe diese Frage:

    • Du bist zu schnell 😛 Hier ist ein arbeiten plunker: plnkr.co/Bearbeiten/HX3LT9RaJD6ki3vpa1aW. Da die Daten in ein array, müssen Sie auch Durchlaufen das array zur Anzeige der getrennten Stücke von Informationen, die Sie speichern
    • Korrigieren Sie mich, wenn ich falsch Liege, aber es sieht aus wie die bootstrap hat sich verändert in den Winkel-2-Finale. Habt Ihr eine Idee, wie passe ich die Lösung, die Sie zur Verfügung gestellt? danke!
    • In der Tat, sofern diese Lösung nicht zu funktionieren scheint auf die neueste version der Winkel-5. Bootstrap-syntax wurde auch geändert, wenn Sie versuchen, dass Sie sagen Service cannot be used as an entry component
    InformationsquelleAutor Thierry Templier
  2. 4

    Müssen Sie ein globaler Anbieter in Ihr Modul an, dann brauchen Sie nicht zu fügen Sie diesem Anbieter in jeder Komponente. versuchen Sie, diese

    app.- Modul.ts

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

    app.Komponente.ts

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

    }
}

    login.Komponente.ts

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

    constructor(public loginService: LoginService) {

    }
}

    Ich hoffe, dass diese Arbeit für Sie.

    InformationsquelleAutor Oswaldo Alvarez
Schreibe einen Kommentar