Angular Material 2 Spinner with Angular 4

Question

藉助現有的course course材質教程，我能夠嘗試使用http和訂閱場景與Angular 4控件。當我在第一時間獲取所有照片時，我發現UI存在滯後。因此，我想到了實現微調加載數據md-progress-spinner的印象，但由於某種原因微調不顯示&而且我也沒有看到任何控制檯日誌，你能否建議？

spinner.service.ts：

import {Injectable} from '@angular/core'; 
import {Subject} from 'rxjs/Subject'; 


@Injectable() 
export class SpinnerService { 
    public status: Subject<boolean> = new Subject(); 
    private _active: boolean = false; 

    public get active(): boolean { 
     return this._active; 
    } 

    public set active(v: boolean) { 
     this._active = v; 
     this.status.next(v); 
    } 

    public start(): void { 
     this.active = true; 
    } 

    public stop(): void { 
     this.active = false; 
    } 
} 

app.module.ts：

@NgModule({ 
    declarations: [ 
     AppComponent, 
     SpinnerComponent 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     BrowserAnimationsModule, 
     MdButtonModule, 
     MdMenuModule, 
     MdCardModule, 
     MdToolbarModule, 
     MdIconModule, 
     MdProgressSpinnerModule 
    ], 
    providers: [SpinnerService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts：

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    myData: Array<any>; 

    constructor(private http:Http,private spinner: SpinnerService) { 
     this.spinner.start(); 
     this.http.get('https://jsonplaceholder.typicode.com/photos') 
       .map(response => response.json()) 
       .subscribe(res => this.myData = res, 
          error => console.error(error), 
          () => this.spinner.stop() 
          ); 
    } 
} 

app.component.html：

<app-spinner>Spinning...</app-spinner> 

<md-toolbar color="primary"> 

    <span>MyCompany</span> 
    <span class="example-spacer"></span> 
    <button md-button [mdMenuTriggerFor]="appMenu"><md-icon>menu</md-icon> Menu</button> 

</md-toolbar> 

<md-menu #appMenu="mdMenu"> 
    <button md-menu-item> Settings </button> 
    <button md-menu-item> Help </button> 
</md-menu> 

<md-card class="example-card" *ngFor="let data of myData; let i = index"> 

    <!--<md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,10): []); let i = index"> --> 

    <img md-card-image src="{{ data.url }}"> 
    <md-card-header> 
     <md-card-title>{{ data.title }}</md-card-title> 
    </md-card-header> 

    <md-card-actions> 
     <button md-button>LIKE</button> 
     <button md-button>SHARE</button> 
    </md-card-actions> 
</md-card> 

spinner.component.ts：

@Component({ 
    selector: 'app-spinner', 
    templateUrl: './spinner.component.html', 
    styleUrls: ['./spinner.component.css'] 
}) 
export class SpinnerComponent implements OnInit, OnDestroy { 

    public active: boolean; 

    public constructor(private spinner: SpinnerService) { 
     spinner.status.subscribe((status: boolean) => { 
      this.active = status; 
     }); 
    } 

    ngOnInit(){ 
     this.spinner.stop(); // or do it on some other event eg: when xmlhttp request completes loading data for the component 
    } 

    ngOnDestroy(){ 
     this.spinner.start(); 
    } 

} 

spinner.component.html：

<div *ngIf="active"> 
    <md-progress-spinner mode="indeterminate"></md-progress-spinner> 
</div> 

請檢查我我在加載微調器時犯了一些錯誤，我的願景是讓這個微調器跨越多個應用程序通過讓應用程序微調選擇器僅在app.component.html中提到，可以請求通知上述方法是否良好&需要進行任何更改？

Answer 1

而不是不同的方法，有一個變量，它是從你想要實現spinner的組件直接設置的。因此，例如

你spinner.ts

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-loader', 
    templateUrl: './loader.component.html', 
    styleUrls: ['./loader.component.css'] 
}) 
export class LoaderComponent{ 
    @Input() show:boolean; 
} 

HTML：

<div *ngIf="show"> 
     <md-spinner></md-spinner> 
    </div> 

組件，你想用你的spinner。

<app-loader [show]="showLoader"> 

    </app-loader> 

而在您的TS中，只需將值showLoader設置爲true/false。

Answer 2

你可以做這樣的事情：

Emmitter

import { Injectable , EventEmitter } from '@angular/core'; 

    @Injectable() 
    export class SpinnerService { 
    public spinnerActive: EventEmitter<Boolean>; 
    constructor() { 
    this.spinnerActive = new EventEmitter(); 

    } 

    activate(){ 
    this.spinnerActive.emit(true) 
    } 

    deactivate(){ 
    this.spinnerActive.emit(false) 
    } 

} 

在你app.component創建與事件的服務。TS

constructor(private http: Http , private spinnerService : SpinnerService){ 
    this.spinnerService.spinnerActive.subscribe(active => 
    this.toggleSpinner(active)); 
    } 
    toggleSpinner(active){ 
     console.log("inside Toggle Spinner") 
     this.activeSpinner = active 
    } 

而且你activeSpinner可以使用這樣的模板：

<md-spinner *ngIf="activeSpinner"></md-spinner>

激活，並通過activate和deactivate服務方式停用微調。

爲了讓它在任何地方都能正常工作，請確保您的微調器是精心設計的（z-index）和position fixed，以便微調控制器位於其上方的任何東西之上（如果有的話）。

Answer 3

我在DOM微調的元素，但我看不到它，這是我解決方式：

在HTML組件：

<mat-progress-spinner mode="indeterminate" [diameter]="28"></mat-progress-spinner> 

在app.module.ts：

import { MatProgressSpinnerModule } from '@angular/material'; 
@NgModule({ 
    imports: [ 
    MatProgressSpinnerModule], 
    exports: [ 
    MatProgressSpinnerModule 
    ] 

和在style.css中：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';