Angular2模态对话框

AppService服务 AppComponent - > HeroComponent - > WeaponComponent - > ButtonComponent

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

我能想到的最好的办法是让在AppService服务一个dialogObservable。 ButtonComponent设置observable，AppComponent监听它，并在有对话框设置时显示对话框。

这已经感觉有点乱。

但使情况变得更糟，我还需要在对话框按钮。当有人点击“确定”按钮时，我想从WeaponComponent调用一个动作。就我所知，这是不可能的。那么我该怎么做？在服务中创建另一个observable，并在WeaponComponent中监听它。

这种感觉很凌乱，我觉得必须有一个更好的办法。我无法弄清楚。

来源

2016-10-04 Kris

我也有类似的问题，我在我的根模块组件添加一个模式，并提供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的模态回调方法，它不会松动上下文。

来源

2016-10-04 09:57:25 Supamiu

如果我正确理解你，我以类似的方式去做。我在服务中创建模式。但我最大的问题是如何处理对话框中的按钮点击。我希望对话框中按钮的点击事件触发打开对话框的组件中的处理程序，而不是在对话框本身或服务中。我可以在打开对话框时使用该功能。但它被拉出了它的范围。因此，从该事件处理函数中，我无法再访问原始组件。所以我仍然坚持这一点。 – Kris

你的模块应该在你的模块基础组件中，这样它仍然在它的模块范围内，但是你使用css将它放置到全屏+顶部z-index并完成。 – Supamiu

在我的情况下，这是不可能的，不幸的是。另外，对话只是一个例子，但也可能是应用程序中某处的不同警报消息，但在组件外部。现在，我通过将“this”传递给模式来解决这个问题，尽管它有点麻烦...... – Kris

Angular2模态对话框

回答

相关问题