angular2 material "progress circle"

Question

如果我们使用 angular-cli 并将所有 angular material 2 放入其中并且工作正常，我们如何将示例进度圈添加到 index.html

  <app-root>
    <md-spinner>Loading..</md-spinner>
  </app-root>

在此加载文本中，以便我们可以看到圆形加载而不是纯文本

我已经尝试将其导入 app-root component.ts 像这样

import { Component } from '@angular/core';
import {MD_PROGRESS_CIRCLE_DIRECTIVES} from '@angular2-material/progress-circle';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives:[MD_PROGRESS_CIRCLE_DIRECTIVES]
})
export class AppComponent {
  title = 'app works!';
}

知道如何让它在 index.html 中工作吗？

Answer 1

不要认为这是可能的，因为 "Loading..." 将在 Angular 加载之前显示。所以你不可能真的有 Angular 东西显示 Angular 加载。

有this example that seems to have a "pre-loader" div on it taht looks like it is doing what you are trying to accomplish. You can look into their source for more information here

Answer 2

为了使其成为运行，请将这两条语句添加到您的 systemjs.config.js 文件中：

@angular2-material/progress-circle': 'node_modules/@angular2-material/progress-circle,

node_modules/@angular2-material/progress-circle': { main: 'progress-circle.js', defaultExtension: 'js' },

您可以在这张图片中看到这些语句的位置： systemjs.config.js file

当然，你需要先使用npm安装模块：

npm i @angular2-material/progress-circle

希望这对您有所帮助:)

angular2 material "progress circle"

angular2 material "progress circle"

angular

angular-material

angular-cli