问题1:如何在Angular 8中使用Materalize?
解决方法:
在你的Angular 8项目中安装Materalize CSS和JavaScript依赖项。
使用以下命令安装Materalize CSS和JavaScript:
npm install materialize-css@next
或者可以使用CDN链接,将以下链接添加到你的index.html文件中:
在你的Angular项目中导入Materalize样式和脚本。
在angular.json文件中的styles数组中添加以下路径:
"styles": [
"node_modules/materialize-css/dist/css/materialize.css",
"src/styles.css"
],
在angular.json文件中的scripts数组中添加以下路径:
"scripts": [
"node_modules/materialize-css/dist/js/materialize.js"
]
在你的组件中使用Materalize样式和组件。
在你的组件中引入Materalize样式和组件:
import M from 'materialize-css/dist/js/materialize';
export class YourComponent implements OnInit {
ngOnInit() {
// 初始化所有Materalize组件
M.AutoInit();
}
}
现在你可以在你的Angular 8项目中使用Materalize CSS和组件了。
问题2:如何在Angular 8中使用Materalize的Modal组件?
解决方法:
首先按照上述步骤在Angular 8项目中添加Materalize依赖项和样式。
在你的组件模板中创建一个按钮,用来触发Modal组件:
在你的组件中添加打开和关闭Modal的方法:
import { Component, OnInit } from '@angular/core';
import M from 'materialize-css/dist/js/materialize';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
ngOnInit() {
M.AutoInit();
}
openModal() {
const modal = document.getElementById('your-modal');
const instance = M.Modal.init(modal);
instance.open();
}
closeModal() {
const modal = document.getElementById('your-modal');
const instance = M.Modal.getInstance(modal);
instance.close();
}
}
在你的组件模板中添加Modal组件:
现在你可以通过点击按钮打开Modal,点击关闭按钮或点击模态框外部来关闭Modal。