如何使用異步數據有條件地設置管道角度

Question

我有一個非常簡單的組件，可以製作漂亮的小儀表板卡，我可以將它重複用於多個數據片段。當我使用測試數據時，我的情況很好，因爲它立即發送數據並選擇正確的管道。但是，在真正的儀表板上，它需要從API調用數據。數據被返回，但由於這不再是ngOnInit，我的情況不會觸發。有人會知道在從我的服務中獲取數據後，我可能會選擇合適的條件嗎？

組件：

import { Component, OnInit } from '@angular/core'; 
import {SecondsToMinutesPipe} from "../seconds-to-minutes.pipe"; 
import { DecimalPipe } from "@angular/common"; 

@Component({ 
    selector: 'app-dash-stat', 
    inputs: [ 
    'icon', 'color', 'amount', 'description', 'time' 
    ], 
    templateUrl: './dash-stat.component.html', 
    styleUrls: ['./dash-stat.component.css'], 
}) 
export class DashStatComponent implements OnInit { 

    private loading: boolean = true; 
    private icon: string; 
    private color: string = '#fff'; 
    private amount: any = 0; 
    private description: string; 
    private time: boolean = false; 

    constructor(private timePipe: SecondsToMinutesPipe, private numberPipe: DecimalPipe) { } 

    ngOnInit() { 
     this.loading = false; //remove this and figure out 

     if(this.time){ 
     this.amount = this.timePipe.transform(this.amount); 
     } 
     else 
     { 
     this.amount = this.numberPipe.transform(this.amount, '1.0-0'); 
     } 
    } 

} 

我把它從我的儀表盤就像這樣：

<div class="col-sm"> 
    <app-dash-stat icon="fa-tint" color="#eb1c2d" description="Litres Flown" amount="{{dashStats.volume}}"></app-dash-stat> 
    </div> 

    <div class="col-sm"> 
    <app-dash-stat icon="fa-clock-o" color="#fd6b00" description="Average Loading Time" amount="{{dashStats.filltime}}" time="true"></app-dash-stat> 
    </div> 

Answer 1

首先，如果你認爲<app-dash-stat icon="fa-tint" color="#eb1c2d" description="Litres Flown" amount="{{dashStats.volume}}"></app-dash-stat>這個語法將數據傳遞到<app-dash-stat>組件是錯的。代碼在語法上是錯誤的。你不能簡單地調用這樣的屬性。你應該附上[ ]。 <app-dash-stat icon="fa-tint" [color]="#eb1c2d" [description]="Litres Flown" [amount]="dashStats.volume">，你不能混合屬性綁定和插值。 並且在您的類中需要從父組件注入數據的變量，則應使用@Input()註釋。

@Input() private loading: boolean = true; 
@Input() private icon: string; 
@Input() private color: string = '#fff'; 
@Input() private amount: any = 0; 
@Input() private description: string; 
@Input() private time: boolean = false; 

Answer 2

我在想可能發射事件會起作用，但是ngOnChanges最終還是會這樣做。

ngOnChanges(changes: SimpleChanges){ 

    this.loading = false; //remove this and figure out 

    if(this.time){ 
     this.amount = this.timePipe.transform(changes.amount.currentValue); 
    } 
    else 
    { 
     this.amount = this.numberPipe.transform(changes.amount.currentValue, '1.0-0'); 
    } 

    } 

Answer 3

如果你想從一個組件到另一個，這個數據樣的變化傳遞數據，你想創建一種可注射的數據服務，您可以訂閱，可以通過周圍的值。這是我的數據服務的一個副本，給你一個想法：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import { ReplaySubject } from 'rxjs/ReplaySubject'; 

@Injectable() 
export class DataService { 
    // for single non-async string data 
    stringData: string; 


    // for complex async data; use setData/getData 
    private dataItem: ReplaySubject<any> = new ReplaySubject<any>(); 

    public setData(data: any) { 
     this.dataItem.next(data); 
    }; 

    public getData(): Observable<any> { 
     return this.dataItem.asObservable(); 
    }; 
} 

在你app.module.ts您導入並添加它的@NgModule提供商：

import { DataService } from '../app/Services/data.service'; 

@NgModule({ 
... 
    providers: [ 
     DataService 
    ] 
... 

然後在這兩個你成分導入它：

import { DataService } from '../Services/data.service'; 

並且你使用的部件，像這樣：

源組件：

export class sourceComponent { 
    myVariable: any; 
    constructor(
     public dataService: DataService){ 

    // do something... 
    } 

    SomeFunction(): void { 
    // do something... 
     this.dataService.setData(this.myVariable); 
    } 
} 

目標組件：

import { Subscription } from "rxjs/Subscription"; 

// @component and stuff... 
export class targetComponent { 
    myValue: any; 
    subscription: Subscription; 

    constructor(
     public dataService: DataService) {  


     this.subscription = this.dataService.getData() 
      .subscribe(
      data => { 

       this.myValue = data; 
       // do stuff maybe 

       }, 
      error => { 
       console.log(error); 
      }); 
    } 
} 

然後數據應該更新每有事情發生的時間。所以，你沒有得到內存泄漏，一定要在目標組件退訂像這樣：

ngOnDestroy() { 
    // unsubscribe to ensure no memory leaks 
    this.subscription.unsubscribe(); 
}