使用具有 Angular 的 MaterialiseCSS

Created: November-22, 2018

有许多方法可以使用 MaterialiseCSS 框架。

在安装之前要记住几件事

虽然它有 CSS 名称，但它不仅仅是 CSS 框架。我们也可以使用它的 SCSS
它不是为 Angular 构建的
它是一个基于 jquery 构建的组件框架。虽然我们不应该在角度使用 jquery（不建议），但我们仍然导入。

你可以使用以下任何方法：

CDN
资产
包含在 Angular(NPM) 中
包含在 Angular 中（来自 SCSS 的源代码）

每个都有自己的优点和缺点。

CDN

只需将此添加到 index.html 即可开始使用。

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
 
 <!-- We need jquery first -->  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

资产

将其添加为项目中的资产。这有助于在本地构建和运行时不依赖于互联网。

下载 jQuery

下载 CSS 版本

提取它们
复制资产文件夹中的 materialize.min.css，jquery-3.2.1.min.js 和 materialize.min.js

将它们添加到 index.html

 <link rel="stylesheet" href="./assets/materialize.min.css" >
 <script src="./assets/jquery-3.2.1.min.js"></script>
 <script src="./assets/materialize.min.js"></script>

包括角度（NPM）

在这个方法中，我们直接将文件包含在角度构建中。我假设角度项目是用 @angular/cli 构建的，以简化。

做

npm install materialize-css --save 
npm install jquery --save

这与下载 CSS 文件相同，但我们不需要在我们的存储库中添加它们。

将以下内容添加到 .angular-cli.json：

"styles": [
    "../node_modules/materialize-css/dist/css/materialize.css",
    "styles.scss"
]

...

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

包括角度（SCSS）

使用 SCSS 版本下载源代码

如果你想利用 SCSS 来更改库的默认行为，请执行此操作。否则，你仍然可以使用以前的方法并使用 SCSS。

将它们添加到 src 外的文件夹中。可以创建一个文件夹 materialize-src 作为 src 的兄弟，并将内容粘贴到那里。我们这样做是因为 npm install of materialize-css 并没有给我们 scss 版本。（ 如果我错了，请纠正我 ）

安装 jquery

npm install jquery --save

将它们添加到你的 .angular-cli.json

"styles": [
    "../materialize-src/sass/materialize.scss",
    "styles.scss"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../materialize-src/js/bin/materialize.min.js"
 ],

与 Angular 集成：

上述所有安装方法都提供了实现的全部功能，无需进一步安装任何角度工作。举个例子，在角度的组成部分内部使用适当的 HTML 结构，你就可以了。

在某些情况下，你可能需要修改 javascript，为此我们需要使用 jQuery。而不是我们可以在 angular2-materialize 处使用角度包装开发者。我开发了一个使用角度和物化的全功能站点，从来没有感觉到需要。

如果你仍然相信你需要它。你可以按如下方式安装：

使用上述任何方式安装实现

安装 angular2-materialize

 npm install angular2-materilize --save

添加角度 app.module.ts

 import { MaterializeModule } from "angular2-materialize";

 @NgModule({
   imports: [
     //...
     MaterializeModule,
   ],
   //...
 })