Kommunizieren Sie zwischen Komponenten außerhalb der Hierarchie (Angular2)

Question

Ich habe die Dokumente auf, wie man, was ich will, aber vergeblich durchforstet. Ich habe eine dynamische Formularkomponente, die eine untergeordnete Route des übergeordneten Objekts ist. Zum Beispiel, hier ist der Weg für das Benutzerprofil und das Bearbeiten von Benutzerprofilform:

{ 
    canActivate: [AuthGuard], 
    path: 'profile', 
    component: ProfileComponent, 
    children: [ 
     { 
      path: 'edit', 
      component: FormComponent, 
      data: { 
       form_title: 'Edit Profile', 
       action: 'current_user', 
       method: 'put' 
      } 
     } 
    ] 
}, 

Ich versuche, die Methode hier zu verwenden: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Es ist allerdings nicht zu arbeiten. Ich denke, das Problem ist, dass ich verschiedene Instanzen des gleichen Dienstes injiziere, damit es keine tatsächliche "Verbindung" zwischen den Komponenten gibt.

Hier meine Komponenten und meinen Dienst sind mit dem ich zu kommunizieren versuche:

ProfileComponent:

@Component({ 
    moduleId: module.id, 
    selector: 'profile', 
    templateUrl: 'templates/profile.component.html', 
    providers: [ FormControlService ] 
}) 
export class ProfileComponent implements OnDestroy{ 
    private user: User; 
    private profile_sub: Subscription; 

    constructor(
     private auth: AuthenticationService, 
     private fcs: FormControlService 
    ){ 
     this.user = auth.getUser(); 
     this.profile_sub = fcs.resourceUpdated$.subscribe(user => { 
      this.user = user; 
      console.log(user); //nothing is logged to console here 
     }); 
    } 

    ngOnDestroy(){ 
     this.profile_sub.unsubscribe(); 
    } 
} 

FormComponent (verdummt zeigen die relevanten Teile, ist wichtiger Teil onSubmit() Funktion)

@Component({ 
    moduleId: module.id, 
    selector: 'nw-form', 
    templateUrl: 'templates/form.component.html', 
    styleUrls: [ 'css/form.component.css' ], 
    providers: [ FormControlService ] 
}) 
export class FormComponent implements OnInit, OnDestroy{ 
    private fields: FormItem<string | Object>[][]; 
    private form_title: string; 
    private form: FormBaseClass; 
    private model_sub: Subscription; 
    private submit_sub: Subscription; 

    formGroup: FormGroup; 

    constructor(
     private fcs: FormControlService, 
     //...removed irrelevant code...// 
    ) { 
     //...sets up form and populates fields if necessary...// 
    } 

    ngOnDestroy(): void { 
     if(this.model_sub) this.model_sub.unsubscribe(); 
     if(this.submit_sub) this.submit_sub.unsubscribe(); 
    } 

    onSubmit() { 
     //this is where I am trying to send data back to the profile component 
     this.fcs.updateResource(this.formGroup.value); 

    } 


} 

FormControlService (auch wichtige Teile verdummt)

@Injectable() 
export class FormControlService { 
    private savedSource = new Subject<any>(); 

    resourceUpdated$ = this.savedSource.asObservable(); 

    constructor(
     private clientForm: ClientForm, 
     private profileForm: ProfileForm 
    ) {} 

    updateResource(resource: any): void { 
     this.savedSource.next(resource); 
    } 
    //...more functions go here...// 
} 

Mit meinem Router-Setup gibt es einen besseren Weg, dies zu tun? Ich möchte die Formularkomponente nicht als Richtlinie innerhalb der Profilkomponente verwenden, aber wenn dies der einzige Weg ist, muss ich meinen Code möglicherweise anpassen.

Eckig 2.2.0

Answer 1

Stellen Sie den Dienst nicht auf der Komponente bereit. Jede Komponenteninstanz erhält eine andere Instanz.

bieten Statt es in

@NgModule({ 
    providers: [BrowserModule, ..., FormControlService], 
    .... 
}) 
export class AppModule /* or SubModule */ {}