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（dumbed down显示相关部分，重要部分是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 */ {}

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

1 个答案: