title: Communicate between components outside of hierarchy (Angular2)
body: <p>I have scoured the docs on how to do what I want but to no avail. I have a dynamic form component that is a child route of the parent object. For example, here is the path for the user profile and the edit user profile form:</p>
  
  <pre><code>{
      canActivate: [AuthGuard],
      path: 'profile',
      component: ProfileComponent,
      children: [
          {
              path: 'edit',
              component: FormComponent,
              data: {
                  form_title: 'Edit Profile',
                  action: 'current_user',
                  method: 'put'
              }
          }
      ]
  },
  </code></pre>
  
  <p>I am trying to use the method here: <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service</a></p>
  
  <p>It is not working though. I think the problem is that I am injecting different instances of the same service to communicate so there is not an actual "connection" between the components. </p>
  
  <p>Here are my components and my service I am trying to communicate with:</p>
  
  <p>ProfileComponent:</p>
  
  <pre><code>@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 =&gt; {
              this.user = user;
              console.log(user); //nothing is logged to console here
          });
      }
  
      ngOnDestroy(){
          this.profile_sub.unsubscribe();
      }
  }
  </code></pre>
  
  <p>FormComponent (dumbed down to show the relevant parts, important part is onSubmit() function)</p>
  
  <pre><code>@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&lt;string | Object&gt;[][];
      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);
  
      }
  
  
  }
  </code></pre>
  
  <p>FormControlService (also dumbed down to important parts)</p>
  
  <pre><code>@Injectable()
  export class FormControlService {
      private savedSource = new Subject&lt;any&gt;();
  
      resourceUpdated$ = this.savedSource.asObservable();
  
      constructor(
          private clientForm: ClientForm,
          private profileForm: ProfileForm
      ) {}
  
      updateResource(resource: any): void {
          this.savedSource.next(resource);
      }
      //...more functions go here...//
  }
  </code></pre>
  
  <p>With my router setup, is there a better way to do this? I would rather not have to use the form component as a directive inside the profile component, but if that is the only way I may just have to adjust my code to suit.</p>
  
  <p>Angular 2.2.0</p>