要在Angular 6中使用旋转器,你可以使用Angular Material库中的MatProgressSpinner组件。
首先,确保你已经安装了Angular Material库。在项目根目录下运行以下命令:
npm install @angular/material @angular/cdk
然后,在你的Angular组件中导入MatProgressSpinner模块和MatIconModule模块:
import { Component, OnInit } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
接下来,在你的组件类中定义一个布尔变量来控制旋转器的显示与隐藏:
export class MyComponent implements OnInit {
showSpinner: boolean = false;
constructor() { }
ngOnInit() {
}
// 示例的方法
loadData() {
this.showSpinner = true;
// 模拟加载数据的过程
setTimeout(() => {
// 加载完成后隐藏旋转器
this.showSpinner = false;
}, 3000);
}
}
最后,在你的组件的HTML模板中使用MatProgressSpinner组件,并根据showSpinner变量的值来控制其显示与隐藏:
现在,当你点击"加载数据"按钮时,旋转器将显示出来,3秒后加载完成后自动隐藏。
请注意,你还可以根据需要调整旋转器的样式和行为,例如修改颜色、大小和模式等。有关更多信息,请参考Angular Material的文档。