带有 Angular 4 的 Angular Material 2 Spinner

Question

借助 courstro 上现有的 Angular Material 教程，我能够使用 Angular 4 和 Angular Material 控件尝试 http 和订阅场景。当我首先获取所有照片时，我发现 UI 存在滞后。因此，我考虑过实现 Spinner，它给人以加载数据 md-progress-spinner 的印象，但由于某种原因，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

你可以这样做:

使用事件发射器创建服务

   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这样微调器就会出现在它上面呈现的所有内容之上(如果有的话)。