角度：如何使時間信號

Question

我需要做一個紅綠燈，從0至10分鐘是綠色的，從10至20的黃色和從20到30的紅色，時間是由服務

到目前爲止，是我的代碼

這是組件

import { 
 
    Component, 
 
    OnInit, 
 
    Input 
 
} from '@angular/core'; 
 
import { 
 
    TiempoService 
 
} from "app/servicios/tiempo.service" 
 

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

 
    @Input() tiemposervice: TiempoService; 
 
    constructor() {} 
 

 
    ngOnInit() { 
 

 

 
    } 
 

 

 
}

這是HTML

<div class="row"> 
 
    <div class="small-12 medium-6 columns"> 
 
    <span>Tiempo transcurrido</span> 
 
    <h5>{{tiempoTranscurrido | date:'mm:ss'}}</h5> 
 
    </div> 
 
</div>

這是服務

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

 
@Injectable() 
 
export class TiempoService { 
 

 
    tiempoTranscurrido: number; 
 

 

 
    constructor() {} 
 

 
    ngOnInit() { 
 

 
    } 
 
    tiempoTotal() { 
 
    Rx.Observable.interval(1000).subscribe(segundos => { 
 
     this.tiempoTranscurrido = segundos * 1000; 
 
    }) 
 
    } 
 
}

我將非常感謝您的幫助。

Answer 1

我建議你需要的是這樣的：

服務：

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

@Injectable() 
export class LightService { 
    getLight(interval): Observable<string> { 
    return Observable.interval(interval) 
     .timeInterval() 
     .map(time => { 
     if(time.value % 3 === 2) { 
      return 'green'; 
     } else if(time.value % 3 === 0) { 
      return 'yellow'; 
     } else if (time.value % 3 === 1) { 
      return 'red'; 
     } 
     }); 
    } 
} 

組件：

import { Component, OnInit } from '@angular/core'; 
import { LightService } from './light.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [ LightService ] 
}) 
export class AppComponent implements OnInit { 
    light: string = "green"; 

    constructor(private lightService: LightService) {} 

    ngOnInit() { 
    this.lightService 
     .getLight(10000) // 10 seconds interval 
     .subscribe(light => this.light = light); 
    } 
} 

模板：

<h1> 
    {{ light }} 
</h1> 
<ul> 
    <li *ngIf="light === 'green'" class="green"></li> 
    <li *ngIf="light === 'yellow'" class="yellow"></li> 
    <li *ngIf="light === 'red'" class="red"></li> 
</ul> 

種

樣式：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    width: 64px; 
    height: 64px; 
    border-radius: 50%; 
    border: 1px solid black; 
} 

.green { 
    background-color: green; 
} 

.yellow { 
    background-color: yellow; 
} 

.red { 
    background-color: red; 
} 

如果你需要顯示燈只有一次加拿運營商：

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

@Injectable() 
export class LightService { 
    getLight(interval): Observable<string> { 
    return Observable.interval(interval) 
     .timeInterval() 
     .map(time => { 
     if(time.value % 3 === 2) { 
      return 'green'; 
     } else if(time.value % 3 === 0) { 
      return 'yellow'; 
     } else if (time.value % 3 === 1) { 
      return 'red'; 
     } 
     }) 
     .take(2); 
    } 
}