Angular2 - MaterialiseCSS:模态对话框无法打开

Question

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

我也使用materilize-select,它完全正常,所以我猜安装,进口等都是正确的.

问题是,当我点击模态触发器时,路由器解析新的路由"localhost:4200 /#modal1",我被重定向到我的起始页.

我也尝试用href替换,data-target="modal1"但这也不起作用.

我可以以某种方式禁用路由器的哈希链接吗？我的其他路线没有哈希.

下面是来自npm docs的例子.我复制了这部分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>

任何帮助/提示表示赞赏!

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

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

哪个触发

$('#modal1').openModal()

但现在我得到一个错误: j.velocity不是一个函数

编辑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-实现5.2.1
• materialize-css 0.97.7
• jquery 2.2.4

我希望我可以为其他人节省一些令人沮丧的时间.