angular2材质“进度圈" [英] angular2 material "progress circle"

问题描述

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

If we using angular-cli and put in all the angular material 2 inside it and working fine, how do we add for an example progress circle to the index.html

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

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

in this loading text so that we can see circle loading instead of plain text

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

i allready try import that to app-root component.ts like this

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 中工作吗?

any idea how to make it works in index.html?

推荐答案

为了让它运行，将这两条语句添加到你的 systemjs.config.js 文件中:

In order to make it run, add these two statements to your systemjs.config.js file:

@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 文件

You can see the position of these statements in this image: systemjs.config.js file

当然，您需要先使用 npm 安装模块:

Of course, you need to first have installed the module using npm:

npm i @angular2-material/progress-circle

希望这有帮助:)

这篇关于angular2材质“进度圈"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！