Angular Material 2 Spinner with Angular 4

问题描述：

借助现有的course course材质教程，我能够尝试使用http和订阅场景与Angular 4控件。当我在第一时间获取所有照片时，我发现UI存在滞后。因此，我想到了实现微调加载数据md-progress-spinner的印象，但由于某种原因微调不显示&而且我也没有看到任何控制台日志，你能否建议？Angular Material 2 Spinner with Angular 4

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中提到，可以请求通知上述方法是否良好&需要进行任何更改？

在米y case spinner is displayed up and my spinner control is in app.component.html - > router-outlet> - >我可以看到微调框，但背景不灰色。。如何保持微调，但灰色背景在我的情况 ??你找到解决方案吗？ –

答

而不是不同的方法，有一个变量，它是从你想要实现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。

感谢您的回答，但我的第二个查询指的是让app-spinner或app-loader选择器只在app.component.html中放置一次，并且应该根据可以在多个组件中设置/重置的微调服务标志加载微调器。 – BVS

你可以在你喜欢的任何多个组件中使用它。 'loader'组件是单独的 –

好吧，但是如果你看到我的文件或者请求它的目标是在应用程序组件中声明一次加载程序组件的选择器，并且根据需要，其余组件将不得不使用启动或停止spinner基于服务的订阅.. – BVS

答

你可以做这样的事情：

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，以便微调控制器位于其上方的任何东西之上（如果有的话）。

例如，如何将加载到我的表单顶部的覆盖中？谢谢 – HobojoeBr

答

我在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 '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Angular Material 2 Spinner with Angular 4

相关推荐