弹出窗口显示在页面下方，而不是弹出窗口

Question

我正尝试在angular 4应用程序中使用alertify，但似乎无法使用git。

所以我首先通过添加css将alertify添加到我的组件中

 styleUrls: [
    './myComponent.component.scss',
    '../../../node_modules/alertifyjs/build/css/alertify.css'
  ]

现在我导入这个库：

import * as alertify from 'alertifyjs';

稍后，在一个由按钮单击触发的函数中，我将

alertify.prompt('Prompt Message');

popup在我的整个组件下面显示为一个块元素，而不是一个popup。

我不确定我做错了什么？

Answer 1

好吧，即使我不喜欢我正在使用的解决方案，我还是让它工作了。所以我注意到alertify被放到了供应商捆绑包中(这是有道理的)。所以我使用了：

encapsulation: ViewEncapsulation.None,

因此它将看到供应商捆绑包中的样式。

我尝试的另一种方法是将这一行放在style.css中

@import '~alertifyjs/build/css/alertify.css';

比添加

  styleUrls: [
    './myComponent.component.scss',
    '../../../node_modules/alertifyjs/build/css/alertify.css',
    '../../styles.css'
  ],

并删除encapsulation: ViewEncapsulation.None,。不幸的是，这并没有像我希望的那样工作。

我不喜欢我使用的方法，因为我丢失了封装。

如果有人能想出不同的解决方案，请让我知道。