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

Question

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

javascriptangularmodal-dialogroutermaterialize

7

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

我还使用了一个materilize-select，它运行得非常好，因此我认为安装、导入等都是正确的。

问题在于，当我单击modal-trigger时，路由器会解析新的路径“localhost:4200/#modal1”，然后我会被重定向到我的起始页面。

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

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

这是npm文档中的示例，我完全复制了这一部分。

<!-- 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不是一个函数第二次编辑：使用jQuery而不是$来打开模态框。我仍然收到错误并且应用程序在打开模态框后被卡住了。

- Tallerlei

4个回答

1

我可能晚了一步，但是你把这两个属性放在模态触发器的<a>标签里面，而不是模态框<div>本身。

我也和原帖作者犯了同样的错误，但是仔细阅读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";

- Chandan Kumar

0

您可以尝试通过编程方式打开/关闭：

在 href 上使用 handle (click)="openModal()"
在 openModal() 函数中使用 $('#modal1').openModal();
删除 href="#modal1"
使用 $('#modal1').closeModal(); 创建一个 closeModal() 函数

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

您还可以通过编程方式打开模态框，下面的代码将使您的模态框在文档准备就绪时打开：

- dokkis

感谢您的回答，dokkis。不幸的是，我遇到了一个错误：在jQuery.openModal（materialize.js:2）中出现TypeError：j.velocity不是函数。我会对这个错误进行一些研究。 - Tallerlei

我使用带有webpack的Angular-cli，但我还是新手:/ 所以我猜我需要导入一些东西而不是使用require对吧？ - Tallerlei

尝试在此处：https://github.com/InfomediaLtd/angular2-materialize/issues/20，有一个Webpack配置，其中一个人说：“我想我找到了一些东西。Webpack隔离了jQuery，由于某种原因，MaterializeCSS需要一个window.jQuery对象。因此，我在webpack中添加了以下配置来解决问题（请注意，在其中创建window.jQuery，以提供MaterializeCSS所期望的内容）：”由于velocity描述的“错误”，似乎出于某种原因需要访问jQuery而不是$，请参见此处：https://github.com/Dogfalo/materialize/issues/1229。 - dokkis

我成功打开了模态框，但仍然出现错误。我想知道是因为我的materilze的webconfig已经包含了所提到的"window.jQuery": "jquery"。我所做的是使用jQuery('#modal1').openModal();而不是$。 - Tallerlei

没错。当我从$切换到jQuery时，模态框出现了，但是同样的错误。我认为这与jQuery版本或多个jQuery实例有关。我还没有时间检查它。找到后我会告诉你。到目前为止谢谢！ - Tallerlei

显示剩余2条评论

0

遇到了同样的问题，之前的解决方案都没有帮助我，所以我写了一个新的答案

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

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

   }
}

- GrvTyagi

我不确定你是否使用和我相同的东西。你是否安装了https://www.npmjs.com/package/angular2-materialize？看起来你正在使用纯粹的materialze，而不是angular的包。 - Tallerlei

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tallerlei · Accepted Answer

我找到了一个解决方案。虽然过程很繁琐，但它在这里:

我重新安装了所有与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

我希望能够为其他人节省一些像我一样令人沮丧的时间。