无法在角度项目中设置引导弹出框的宽度答案

【问题标题】：Cannot set width of bootstrap popover in angular project无法在角度项目中设置引导弹出框的宽度
【发布时间】：2018-01-20 06:09:06
【问题描述】：

关于这个主题有几个 stackoverflow 问题，但没有一个对我有用。也许这与 angular4 有关。

基本上我只是想设置弹出框控件的宽度。

这是更好地理解问题的屏幕截图。

<a id="searchPopup" data-html="true" data-placement="auto left" data-container="body" data-toggle="popover">
  <span mdTooltip="Search another website worth" class="glyphicon glyphicon-search">
  </span>
</a>

<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
  test test test test test test test test test test test test test
  <table style="width:1000px;border:1px;">
    <tr>
      <td>
        test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 
      </td>
    </tr>
  </table>
</div>

  ngOnInit() {

    $('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function () {
        return $('#popover-content').html();
      }
    });

  }

.popover {
        max-width: 100% !important;
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【问题讨论】：

你需要写那个方法afterViewInit请尝试一下
我试过了，但是当我点击时没有任何反应。我导入 afterViewInit 顺便说一句。
你能创建一个plunker吗
这很有趣，它在 plunker 中工作，所以我的 css 或代码中应该还有其他内容，plnkr.co/edit/c6jkLS5GqKIH3QEifeaC?p=preview
我已经从 css 文件中删除了所有其他样式，但仍然是同样的问题

标签： twitter-bootstrap angular popover

【解决方案1】：

我终于解决了这个问题。我只是将 css 代码从 component.css 文件移到了 styles.css 文件中。我不知道为什么它在组件 css 中不起作用。

.popover { max-width: 100% !important;}

【讨论】：

它在组件样式中不起作用，因为弹出框有自己封装的 DOM。