можно ли вызвать функцию из сервиса в событии onclick в angular 4 - PullRequest
Новая
       6

можно ли вызвать функцию из сервиса в событии onclick в angular 4

0 голосов
/ 13 июня 2018

Я - новая пчела в угловой 4. Я написал метод getDataMethod () в моей службе data.service.ts.

Теперь я хочу вызвать эту функцию, когда кто-нибудь нажмет кнопку «Отправить» на моей html-странице.

Как мы можем вызвать эту функцию?Пожалуйста, помогите мне.

Я создал экземпляр моего сервиса в конструкторе моего компонента, как показано ниже 

cnstructor(private dataservice: DataService){
    this.data-service-method = this.dataservice.getDataMethod();
}

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Вам необходимо предоставить свои услуги родительскому модулю или самому компоненту (вы можете воспользоваться другим подходом в angular v6, взглянуть на официальные документы), а затем внедрить его в свой компонент, а затем использовать его на * 1001.* или submit событие.

Файл компонента (.ts): 

export class TestComponent {
    constructor(public testService: TestService) {
    }
}

Файл шаблона (.html): 

<button (click)="testService.getDataService()">Button</button>

Хотя лучше, если вывызовите метод службы из метода, объявленного внутри компонента.

0 голосов
/ 13 июня 2018

Как уже упоминалось @Sajeetharan, вам придется вызывать службу из компонента.

Извлечь этот POC стека, который также показывает, как импортировать созданную службу в ваш модуль передВы можете добавить его в компонент.

Сервис 

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

@Injectable()
export class Service {

  public getData(): string {
    return "Data From Service";
  }
}

Модуль 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { Service } from './service'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  providers: [Service],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Компонент

import { Component } from '@angular/core';
import { Service } from './service'

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    name = 'Angular 6';

    public data: string;

    constructor(private _Service: Service) {

    }

    public getData(): void {
        this.data = this._Service.getData();
    }

}

HTML 

<hello name="{{ name }}"></hello>

<button (click)="getData()">get data</button>

<p> data from service - {{data}} </p>
0 голосов
/ 13 июня 2018

Вам необходимо создать экземпляр службы внутри конструктора компонента, затем обратиться к службе и вызвать метод. 

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


export Class ComponentA { 
 constructor(public dataService: DataService) { } 
 myFunct(){
   this.dataService.getDataService().subscribe();
}
}
...