如何在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中将服务调用到组件中？

回答

相关问题