在层次结构之外的组件之间进行通信（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

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

这是我尝试与之通信的组件和服务：

配置文件组件：

@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 */ {}