javascript - Angular2 - MaterializeCSS : Modal dialogs don't open

Question

我正在使用带有 materializecss 的 Angular2。目前我正在尝试创建在单击按钮时打开的模式对话框。文档中还有一个示例 https://www.npmjs.com/package/angular2-materialize .

我还使用了一个 materilize-select，它工作得很好，所以我猜安装、导入等都是正确的。

问题是，当我单击模态触发器时，路由器解析新路由“localhost:4200/#modal1”，我被重定向到我的起始页。

我也尝试用 data-target="modal1" 替换 href，但这也没有用。

我能否以某种方式禁用路由器的哈希链接？我的其他路由没有哈希值。

这是来自 npm 文档的示例。我复制了这部分 1:1。

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

感谢任何帮助/提示!

编辑:我更改了 anchor 以在点击时调用函数

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>

触发

$('#modal1').openModal()

但是现在我得到一个错误: j.velocity is not a function

编辑 2:

通过使用 jQuery 而不是 $ 来打开模式。我仍然收到错误消息，应用程序在打开模式后卡住了。

Answer 1

我找到了一个解决方案。到达那里非常令人沮丧，但在这里:

我重新安装了所有与materialize + angular-cli相关的东西，angular2-materialize，materialize-css，jquery和hammerjs(不需要手动安装)。

然后我按照 npmjs 的说明进行操作并删除了 app.module.ts 中导入 material-css 的部分。

import "materialize-css";

之后一切正常。无需更改 angular2-materialize 包中的 webpack 设置或类似的东西。我的版本是:

• Angular -cli 1.0.0-beta.16
• angular2-materialize 5.2.1
• 物化-css 0.97.7
• jquery 2.2.4

我希望我可以为其他人节省一些我曾因此而沮丧的时间。