组件之间的通信层次结构之外（Angular2）

Question

我已经走遍了如何做我想做的，但无济于事的文档。我有一个动态表单组件，它是父对象的子路径。例如，下面是为用户配置文件和编辑用户配置文件的形式路径：

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

我想在这里使用的方法：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

它不工作，虽然。我认为问题在于我注入了相同服务的不同实例进行通信，因此组件之间没有实际的“连接”。

这里是我的组件和我的服务，我要与通信：

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（简单化，以显示相关的部分，重要的部分是的onsubmit（）函数）

@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（也简单化了重要的部分）

@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...// 
} 

随着我的路由器设置，有没有更好的方法来做到这一点？我宁愿不必在配置文件组件中使用表单组件作为指令，但如果这是我可能需要调整我的代码以适应的唯一方法。

Angular 2.2.0

Answer 1

不提供组件上的服务。每个组件实例将获得不同的实例。

相反，它提供的

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