Angular2模态对话框

Question

应用的结构：

应用服务 AppComponent -> HeroComponent -> WeaponComponent -> ButtonComponent

当有人点击按钮（ButtonComponent）时，我想在 AppComponent 中打开一个模态对话框。

我能想到的最好的方法是在 AppService 中创建一个 dialogObservable。 ButtonComponent设置observable，AppComponent监听，有dialog设置时显示dialog

这已经感觉有点乱了。

但更糟糕的是，我还需要对话框中的按钮。当有人单击 "OK" 按钮时，我想从 WeaponComponent 调用一个动作。据我所知，这是不可能的。那我该怎么办？在服务中创建另一个 observable，并在 WeaponComponent 中监听它。

感觉很乱，感觉一定有更好的办法。我就是想不通。

Answer 1

我有一个类似的问题，我通过在我的根模块组件中添加一个模式并在我的应用程序中提供一个 ModalService 来解决它。

ModalService用作事件调度器，用于调度模态事件。

仅签名的示例（易于理解，实现起来并不难）：

@Injectable()
export class ModalService{
    public registerModal(name:string, onPop:()=>void):void;
    public popModal(name:string):void;
}

这样你的 ModalComponent 可以在任何地方（你可以有很多不同名称的模态），你可以从任何地方弹出它，因为你只需要得到 ModalService。

请注意，要实现此功能，您必须仅使用一个 ModalService 实例，因此必须在您的 module.forRoot() 方法中声明它。

编辑：

要解决上下文问题，您可以这样声明函数并将其存储在变量中：

function foo():any{
}

变成

foo=():any => {
}

然后你可以使用 this.foo 将回调方法传递给你的模式，它不会丢失上下文。

Angular2 modal dialog