服务中的模态未显示 [英] Modal from a service it is not shown
问题描述
当我调用动态模式时，我试图将代码上传到Stackblitz寻求帮助.我正在执行一个函数，希望在任何组件中调用该函数以生成动态弹出窗口，在其中可以动态更改弹出窗口的页眉，正文和页脚.在我的真实代码中，这些值没有刷新.但是碰巧，当将代码上传到该平台Stackblitz时，即使正在使用该服务，也不会显示弹出窗口.我该如何解决?
I tried to upload my code to Stackblitz to look for help when I call my dynamic modal. I am doing a function that I hope to call in any component to generate a dynamic popup in which I can dynamically change the header, body and footer of the popup. In my real code, these values are not refreshed. but it happens that when uploading the code to this platform Stackblitz the popup is never shown even though the service is being consumed. How can I fix it ?
这是我的代码:
https://stackblitz.com/edit/angular-qothyw
推荐答案
您应尽可能避免将jQuery和Angular混合使用.就您而言，您试图实现的目标并不能证明使用jQuery是合理的.
You should avoid mixing jQuery and Angular when possible. In your case, what you are trying to achieve doesn't justify the use of jQuery.
您应该在模态组件中实现显示/隐藏机制，而不是在服务中使用jQuery显示模态.最简单的方法是使用 * ngIf ，但是如果您正在寻找一种更简洁的方法，我建议您使用
Instead of showing your modal with jQuery in your service, you should implement a show/hide mechanism in your modal component. The easiest way is with *ngIf but if you're looking for a cleaner way, I suggest you use Overlay from Angular CDK
然后在服务对模式组件的订阅中显示模式.
Then show your modal in your service's subscription into the modal component.
也就是说，您与StackBlitz的问题来自模态的 @Component 批注中缺少的 providers:[AppService] 行.
That said, your problem with StackBlitz comes from the line providers: [AppService] missing from your modal's @Component annotation.
此配置不起作用，因为已为每个组件实例化了服务，因此您无法将事件从一个组件发送到另一个组件.您应该从每个组件中删除 providers:[AppService] .
This configuration doesn't work because a service is instantiated for each component, thus you cannot emit events from one component to another. You should remove the providers: [AppService] from every component.
您的StackBlitz实际上失败了，因为您在 modal.component.ts 文件(
Your StackBlitz actually fails because you put a comment into JSON configuration in modal.component.ts file (Can comments be used in JSON?).
正在工作的StackBlitz: https://stackblitz.com/edit/angular-peugm6
Working StackBlitz : https://stackblitz.com/edit/angular-peugm6
这篇关于服务中的模态未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
