使用具有 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,
   ],
   //...
 })