Вызов функции в компоненте из сервиса в Angular 5?Без использования @input или @output - PullRequest
Новая
       5

Вызов функции в компоненте из сервиса в Angular 5?Без использования @input или @output

0 голосов
/ 08 октября 2018

Мне нужно вызвать функцию в компоненте из службы Angular.

Как мне это сделать?

При успешном вызове веб-службы я хочувызвать функцию в компоненте

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Мы можем легко вызвать функцию компонента из внедренного сервиса

Посмотрите на этот пример stackblidtz , где функция showAlert вызывается из сервиса , который мыподписаться и получить результаты : 

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component ({
   selector: 'my-app',
   template: '<table border="1"><tr *ngFor="let elem of iproducts"><td>{{ elem.ProductID }}</td><td>{{ elem.ProductName }}</td></tr></table>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }

   ngOnInit() : void {
      this._product.getproducts()
      .subscribe( (iproducts) => {
        this.iproducts = iproducts;
        this.showAlert(); //call showAlert function <------
      });
   }

   showAlert() {
     console.log('we have the products !');
   }
}

Примечание: Намерение службы заключается в том, чтобы внедрить ее в компонент, чтобы мы могли ее использовать и использовать всю бизнес-логикутам и не импортировать компонент в сервис, а вызвать метод компонента в сервисе

0 голосов
/ 08 октября 2018

Ниже приведен шаг:

  • служба импорта в компонент
  • создайте экземпляр с помощью конструктора.
  • теперь вы можете вызывать функцию в компоненте с помощьюпомощь экземпляра.

Таким образом, вы можете следовать приведенному ниже процессу, чтобы вызвать сервисную функцию для компонента. 

Example:-

component file
==============

import { CustomerService } from './../../service/customer.service';

@Component({
    templateUrl: 'add_additional_contact.html'
})
export class AddAdditionalContactComponent implements OnInit { 
    constructor( 
        private addcontactservice: CustomerService 
    ) {}

ngOninit(){
this.addcontactservice.getCustomerList().subscribe((result) => {});
}
}


service file
==================

import { ErrorHandler, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { StaticData } from './../../common/static_data.service';
import { Router } from "@angular/router";
import 'rxjs/add/operator/toPromise';


@Injectable()
export class CustomerService {
public apiUrl = "api URL";
 constructor(
        private http: HttpClient 
    ) { }
getCustomerList(): Observable<any> {
        return this.http.post(this.apiUrl + 'addEditCustomerContact', { action: 'list' });
    }
}
...