时间戳

首页 > 解决方案 > Materializecss 1.0.0 + 角

angular - Materializecss 1.0.0 + 角

问题描述

是否有人使用 Angular 和最新版本的 Materializecss 1.0.0（beta 或 rc）成功构建了任何应用程序？ https://materializecss.com/

似乎所有现有文档都围绕 Materializecss 0.100.2 或 v 1.0.0 但只有 javascript 示例。我正在寻找带有打字稿的Angular（最好是v6）解决方案。努力让这个工作。

提前致谢

标签： angularmaterialize

解决方案

这是您需要做的才能将 Materializecss 与 Angular2+ 一起使用

1：在现有的 Angular 项目中从命令行安装：

npm i materialize-css@next --save

2：在你的 angular.json 中包含 Materialize：

        "styles": [
          "./node_modules/materialize-css/dist/css/materialize.css",
          "src/styles.css"
        ],
        "scripts": [
          "./node_modules/materialize-css/dist/js/materialize.js"
        ]

3：启动服务器

ng serve

4：开始工作

我建议从官方网站下载示例模板并根据您的需要进行修改。

重要 一旦你完成了前面的步骤，你就可以使用 css 组件，但是如果你想使用 javascript 功能，你需要在你想使用它们的每个组件中声明一个 any 类型的 M 变量：

import { Component, OnInit } from '@angular/core';

declare var M: any;

@Component({.....

要初始化组件，请执行以下操作：（模态示例）

this.myModal= new M.Modal(document.querySelector('#myModalId'), this.modalOptions);

在这一步尽量使用ids代替classes，这样可以更好的控制，避免冲突

推荐阅读