angular2材料“进步圈”

时间:2016-07-15 15:48:30

标签: angular angular-material angular-cli

如果我们使用angular-cli并将所有角材料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中运行?

2 个答案:

答案 0 :(得分:1)

不要认为这是可能的,因为&#34;正在加载......&#34;是Angular加载之前会显示的内容。所以你不能真正有一个Angular的东西显示Angular加载。

this example似乎有一个&#34;预加载器&#34;在它上面看起来它正在做你想要完成的事情。您可以查看其来源以获取更多信息here

答案 1 :(得分:0)

为了使其运行,请将这两个语句添加到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

希望这会有所帮助:)