Angular2模态对话框

Question

应用程序的结构：

AppService服务 AppComponent - ＆gt; HeroComponent - ＆gt; WeaponComponent - ＆gt; ButtonComponent

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

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

这已经感觉有些混乱。

但更糟糕的是，我还需要Dialog中的按钮。当有人点击＆＃34; OK＆＃34;按钮，我想从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将回调方法传递给你的模态，它不会松开上下文。