Angular2模式对话框

Question

应用程序结构:

AppServiceAppComponent -> HeroComponent -> WeaponComponent -> ButtonComponent

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

我能想到的最好的方法是在AppService中创建一个对话框。ButtonComponent设置可观察对象，AppComponent监听它，并在有对话集时显示对话框。

这已经感觉有点乱了。

但更糟糕的是，我还需要对话框中的按钮。当有人点击"OK"按钮时，我想从武器组件中调用一个动作。据我所知，这是不可能的。我该怎么做?在服务中创建另一个可观察对象，并在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传递回调方法给你的模态，它不会丢失上下文