如何在Angular中將服務調用到組件中？

我想學習Angular，並且我已經構建了一個鬧鐘。我給用戶一個複選框來選擇他們想取消的警報，我把它放在英雄中，然後在this.ui（）中使用;存儲在我的10cal存儲中。如何在Angular中將服務調用到組件中？

但是我的視圖在元素被刪除後沒有改變。我怎麼做？

1）我想調用我的函數ui（）;在我的服務完成發佈警報後的組件中。

2）如何遞歸調用函數？

這裏是我的register.component.ts

import { Component, OnInit } from '@angular/core'; 
import {ValidateService} from '../../services/validate.service'; 
import {AlarmService} from '../../services/alarm.service'; 
import {FlashMessagesService} from 'angular2-flash-messages'; 
import {Router} from '@angular/router'; 

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

    hours; 
    id: String; 
    timeid: String; 
    time; 
    heroes: any[]; 
    name:string; 
    hero = [1,2,3,4,5].map(id => <any>{id:id, time: new Date(2017,5,id)}) 


    constructor(
    private validateService: ValidateService, 
    private FlashMessage: FlashMessagesService, 
    private Router: Router, 
    private AlarmService: AlarmService 
    ) { 

     } 

    ngOnInit() { 

    this.ui(); 
    } 


    ui(){ 
    setTimeout(() => { 
    this.heroes = JSON.parse(localStorage.getItem('users')); 
    console.log(this.heroes); 
     }, 100); 
    } 

    check(e){ 
    console.log(e); 
    console.log(e.target.checked); 
    console.log(e.target.value); 

    let get = JSON.parse(localStorage.getItem('users')); 
    for(var i= get.length -1 ; i > -1; i--) { 
      if(get[i].id == e.target.value) { 
       get.splice(i, 1); 
      } 
     } 
    localStorage.setItem('users', JSON.stringify(get)); 

    console.log(get); 

    this.ui(); 

    let time = new Date().getTime() 

    this.AlarmService.setUpAlarms(time); 
    } 
}

這是我的報警服務。

import { Injectable } from '@angular/core'; 
import {FlashMessagesService} from 'angular2-flash-messages'; 


@Injectable() 
export class AlarmService { 
    constructor(private FlashMessage: FlashMessagesService) {} 

    setUpAlarms(time: number){ 


    var storage = JSON.parse(localStorage.getItem('users')); 
    var alarms = []; 
    var miliseconds = []; 
    var eventNow = new Date(); 
     for(var i=0; i < storage.length; i++){ 
     var eventEndTime = storage[i]['hours']; 
     var flag = storage[i]['flag']; 
     if (eventEndTime >= new Date()) { 
      alarms.push(storage[i]); 
      var duration = eventEndTime.valueOf() - eventNow.valueOf(); 
      miliseconds.push(duration); 
      miliseconds = miliseconds.sort((a, b) => a - b); 
     } 
     } 
     console.log(miliseconds); 
     localStorage.setItem('users', JSON.stringify(alarms)); 

     for(var i =0; i< miliseconds.length; i++){ 
      setTimeout(() => { 
      this.FlashMessage.show('ALARM CLOCK WAKE UP', {cssClass: 'alert-danger', timeout: 10000}); 

      }, miliseconds[i]);  

      return;    
     } 
    } 
    }

來源

2017-05-04 Dinesh Gupta

好了，還請你幫我嗎？我只需要調用服務中組件中的函數ui（）。 –

如果您嘗試從服務中調用組件中的方法，那麼您的應用程序結構錯誤。組件可以依賴於服務，但不能以其他方式。您的組件應該訂閱服務中的observable，它將在組件完成時向組件推送一個值。查看http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/，瞭解如何在服務中使用observables – glendaviesnz

即使它不是一個更好的方法來調用一個方法，從服務組件，但仍然有辦法做到這一點使用Subject。

import { Injectable } from '@angular/core'; 
import {FlashMessagesService} from 'angular2-flash-messages'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class AlarmService { 
    constructor(private FlashMessage: FlashMessagesService) {} 

    // Observable string sources 
    private compInstance= new Subject<any>(); 
    // Observable string streams 
    comp$ = this.compInstance.asObservable(); 

    setUpAlarms(time: number){ 
    var storage = JSON.parse(localStorage.getItem('users')); 
    var alarms = []; 
    var miliseconds = []; 
    var eventNow = new Date(); 
     for(var i=0; i < storage.length; i++){ 
     var eventEndTime = storage[i]['hours']; 
     var flag = storage[i]['flag']; 
     if (eventEndTime >= new Date()) { 
      alarms.push(storage[i]); 
      var duration = eventEndTime.valueOf() - eventNow.valueOf(); 
      miliseconds.push(duration); 
      miliseconds = miliseconds.sort((a, b) => a - b); 
     } 
     } 
     console.log(miliseconds); 
     localStorage.setItem('users', JSON.stringify(alarms)); 

     for(var i =0; i< miliseconds.length; i++){ 
      setTimeout(() => { 
      this.FlashMessage.show('ALARM CLOCK WAKE UP', {cssClass: 'alert-danger', timeout: 10000}); 

      }, miliseconds[i]);  

     this.compInstance.next();  // Notify alarm published 
      return;    
     } 
    } 
    }

在你的組件

this.AlarmService.comp$.subscribe(
     () => { 
      this.ui() 
     } 
);

參考：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

來源

2017-05-05 04:10:41

如何在Angular中將服務調用到組件中？

回答

相關問題