angular2和materializecss集成

【问题标题】：angular2 and materializecss integrationangular2和materializecss集成
【发布时间】：2016-04-29 17:54:25
【问题描述】：

我正在使用 angular2 构建一个使用 HashLocationStrategy 的 Web 应用程序。一切都很好，直到我尝试将基于 jquery 的 materializecss 组件添加到我的模板中。

例如这里是一个导航栏折叠按钮的示例

<a href="#" data-activates="nav-mobile" class="button-collapse">
    <i class="material-icons">menu</i>
</a>

angular 会将其视为路由路径并导航到主页

这个问题有解决办法吗？

【问题讨论】：

也许只是删除 href="#"？
当我删除 href="#" 时按钮不起作用，我不知道为什么？

标签： javascript angular materialize

【解决方案1】：

正如您自己所说：materializecss 是基于 jquery 的，即它需要 jquery 来激活动态行为。在您的情况下，您必须在页面的 $( document ).ready(function(){}) 代码中的某处添加 $(".button-collapse").sideNav();。

看看https://www.npmjs.com/package/angular2-materialize。这个库正好将这种动态行为添加到 angular2。在您的 angular2 组件中导入“MaterializeDirective”后，您只需将materialize="sideNav" 添加到您的锚标记中，它应该可以工作：

<a href="#" materialize="sideNav" data-activates="nav-mobile" class="button-collapse">
  <i class="material-icons">menu</i>
</a>

【讨论】：