Question

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

我还使用materilize-select，它完全正常，所以我猜安装，进口等都是正确的。

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

我还尝试用data-target="modal1"替换href，但这也不起作用。

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

来自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 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
materialize-css 0.97.7
jquery 2.2.4

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

Answer 2

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

在href
$（ '＃modal1'）openModal（）;在openModal（）函数内部
删除href =“＃modal1”
使用$（'＃modal1'）的closeModal（）函数.closeModal（）;

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

您也可以以编程方式打开模式，下面的代码将使您的模态在文档就绪时打开：

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"，模态<{li}中为materialize="modal"
不需要在我的案例中移除import "materialize-css";

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

4 个答案: