Question

我正在研究一个在不同模块中分离的大型Angular 2应用程序，如下所示：

app.module：
- user.module
- supplier.module
- shared.module
- 等

从我的共享模块中，我正在为应用程序中的所有模态调用Bootstrap 4模态组件，我使用@Input装饰器通过模态配置对象进行自定义。这是我的模态组件.ts的样子：

modal.component.ts：

export class ModalComponent {

    constructor() { }

    public modalMethods = new ModalActionMethods();

    @Input() modalConf: ModalModel;

}

然后从模态模板内部，我引用了modalConf对象，如下所示：

modal.template.html：

<div class="bg-modal-container" [hidden]="!modalConf.isOpen">

最后，当我在任何组件需要它的视图中使用它时，我将数据传递给模态组件：

whatever.component.html：

<modal [modalConf]="modalOptions"></modal>

modalOptions引用了我的whatever.component主类中定义的对象。

whatever.component.ts

export class WhatevertComponent {
    private modalOptions = {
        isOpen: false,
        title: "Some Modal Title"
        // etc.
    }
}

到目前为止一切顺利。

现在，对于我的用户模块，因为我知道我将在多个组件中使用我的模态组件，我想做一些不同的事情，因为这个模块根据路线提供不同的组件：

users.routing.ts：

const routes: Routes = [
    {
        path: '', component: UsersComponent,
        children: [
            { path: 'creation', component: UserCreationComponent },
            { path: 'management', component: UserManagementComponent }
        ]
    }
];

问题：

我想要做的是在我的主UsersComponent中插入我的模态组件（将modalOptions对象放在它的主类和视图中的模态选择器中，与上面的 whatever-component 相同），但也能够以某种方式修改其他子组件中的模态配置，如创建，管理等，以便我可以在我的模态中显示相关的子组件数据。我要避免的是在每个将使用/操作它的子组件中插入（并为其创建一个单独的modalConf对象）我的模态组件。

这样做的最佳方法是什么？我愿意接受建议。

Answer 1

所以......按照Jaime和Rahul对我原来问题的评论，我找到了解决问题的潜在方法。根据他们的建议，我在服务中使用RxJS Observables来允许 whatever-component 的子组件进行交互和通信。我将在下面发布我的实现，希望这可以帮助其他人解决同样的问题。

首先，我使用两种新方法扩展我的模态服务，用于设置和获取模态配置。

<强> modal.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { ModalModel } from '../../models/modal.model';

@Injectable()
export class ModalService {

    private currentConf: ModalModel;

    private confSubject: Subject<ModalModel> = new Subject<ModalModel>();

    public getDefaultConf() {
        return {
            // some default conf
        };
    }

    public setCurrentConf(conf: ModalModel): void {
        this.currentConf = conf;
        this.confSubject.next(conf);
    }

    public getCurrentConf(): Observable<ModalModel> {
        return this.confSubject.asObservable();
    }

}

然后我将模态组件调用从我的子组件移动到我的主组件（无论组件）。在这个组件中，我导入了模态服务，使用默认配置初始化了模态，并在ngInit上订阅了服务的get方法。

<强> whatever.component.ts

import { ModalService } from '../../shared/modal/modal.service';
// ...

export class WhateverComponent {

    public modalOptions: any = this._modalService.getDefaultConf();

    ngOnInit() {
        this._modalService.getCurrentConf().subscribe( (conf: any) => {
            this.modalOptions = conf;
        });
    }
}

最后，从子组件内部，我导入模态服务并在需要更新模态配置时使用其set方法：

this._modalService.setCurrentConf(childCompModalConfig);

我不确定是否需要取消订阅ngDestroy上的服务，或者RxJS是否自动处理此问题。

如果有人有更好的方法并希望分享，请不要犹豫。谢谢！

如何将数据从Angular 2中的多个组件传递给单个@Input？

问题：

1 个答案: