角材2角度4のスピナー

Question

coursetroの既存の角度材のチュートリアルの助けを借りて、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

異なる方法の代わりに、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：あなたのspinnerを使用したい

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

コンポーネント。

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

    </app-loader> 

そして、あなたのTSにちょうど真/偽へshowLoaderの値を設定します。

Answer 2

あなたはこのような何かを行うことができます。

はあなたapp.componentで

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) 
    } 

} 

Emmitterイベントでサービスを作成します。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 HTMLコンポーネントで

：app.module.tsで

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

Answer 3

私はDOMでスピナー要素を得たが、私はそれを見ることができなかった、これは私が解決方法は次のとおりです。

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

とのstyle.cssで：mは

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