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

Question

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

所以我首先通过alertify添加css

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

现在我导入库：

import * as alertify from 'alertifyjs';

后来在一个由按钮点击触发的函数中，我放了

alertify.prompt('Prompt Message');

显示popup为我整个组件正下方的块元素，而不是popup.

我不确定我做错了什么？

score 0 · Accepted Answer

好的，即使我不喜欢我正在使用的解决方案，我也让它工作。所以我注意到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,. 不幸的是，这并没有像我希望的那样奏效。

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

如果有人能提出不同的解决方案，请告诉我。

1 回答 1