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

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。

我不确定我做错了什么？

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,。不幸的是，这并不像我希望的那样有效。

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

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