Angular2 - MaterializeCSS：模态对话框不打开

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>

任何 help/hints 不胜感激！

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

<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

您可以通过以下方式尝试以编程方式使用 open\close：

在 href
$('#modal1').openModal();在 openModal() 函数中
删除 href="#modal1"
有一个 closeModal() 函数 $('#modal1').closeModal();

请参阅 http://materializecss.com/modals.html 当文档说：

You can also open modals programatically, the below code will make your modal open on document ready:

Answer 2

我找到了解决办法。到达那里非常令人沮丧，但这里是：

我重新安装了与 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-material升级 5.2.1
material化-css 0.97.7
jquery 2.2.4

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

Answer 3

遇到同样的问题，上面的解决方案对我没有帮助，所以写一个新的答案

只需在您的组件构造函数中添加 $('.modal').modal();。

import ... './stuff'
declare var $: any
@Component{...}
export class EditBlogComponent ...{
   constructor(){
   //Initialize modal here solve my 
   $('.modal').modal();

   }
}

Answer 4

我可能会迟到，但是您将这两个属性放在模态触发器 <a> 而不是模态 <div> 本身。

我也犯了与 OP 完全相同的错误，但在仔细阅读 angular2-materialize 页面后，我更正了我的代码，如下所述。

而不是这个

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

你必须像:

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal" materialize="leanModal" [materializeParams]="[{dismissible: false}]"> 
... 
</div>

这里要注意三点：

<a> 中没有特殊属性，即触发器
代替materialize="leanModal"，在模态

materialize="modal"

在我的情况下不需要删除 import "materialize-css";

Angular2 - MaterializeCSS：模态对话框不打开

Angular2 - MaterializeCSS: Modal dialogs don't open

javascript

router

modal-dialog

materialize

angular