angular2 материал «Прогресс круг»

Question

Если мы с помощью угловой командной строки и поместить во всех угловом материале 2 внутри него и работает нормально, как мы добавляем для окружности примера прогресса в index.html

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

в этом загрузка текста таким образом, что мы можем видеть круг загрузки вместо обычного текста

я Allready попытаться импортировать, что приложение-корневые 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

Для того, чтобы запустить его, добавить эти два заявления в свой 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 i @angular2-material/progress-circle 

Надеюсь, что это поможет :)

Answer 2

Не думайте, что это возможно, так как «Загрузка ...» - это то, что будет отображаться до тех пор, пока не будут установлены угловые нагрузки. Таким образом, вы не можете иметь Угловую вещь, показывающую, что угловые нагрузки.

Существует this example, у которого, похоже, есть «pre-loader» div на нем, похоже, что он делает то, что вы пытаетесь выполнить. Вы можете посмотреть на их источник для получения дополнительной информации here