想要在 Angular 应用中使用 MaterializeCSS，我们可以使用 ng2-bwired-materialize 这个 npm 包，它提供了一套 Angular 组件来包装 MaterializeCSS。
安装 ng2-bwired-materialize
你可以使用 npm 包管理器来安装 ng2-bwired-materialize：
npm install ng2-bwired-materialize --save
引入 MaterializeCSS
由于 ng2-bwired-materialize 是 MaterializeCSS 的一个封装库，我们需要先引入 MaterializeCSS。你可以在 index.html 或者你的全局 CSS 文件导入下面这行代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
使用 ng2-bwired-materialize 组件
我们来看看如何在 Angular 组件中使用 ng2-bwired-materialize。
首先，我们需要在模块中导入 Ng2BwiredMaterializeModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------------------- - ---- ------------------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ---------------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
现在我们可以在 AppComponent 中使用 ng2-bwired-materialize 组件了。让我们尝试使用一个 Modal 组件。
-- -------------------- ---- -------
---- ------------------ ---
------- ----------- --------------------------- --------------
----------------- ------ ----------------------
---- ----------------------
--------- ----------
-------- -----------
------
---- ---------------------
------- ------------------- ----------- ------------------------
------
-------------------在上面的代码中，我们使用了 ng2-bwired-modal 组件来创建一个 Modal。我们还传递了 options 参数表示 Modal 的 ID。我们可以在点击按钮时通过 modal.open() 方法来打开 Modal。
示例代码
完整的示例代码可在 GitHub 上进行查看：ng2-bwired-materialize-example。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6a81e8991b448db2ec