是否可以在 Angular 4 中的 OnClick 事件中从服务调用函数

Question

我在服务'data.service.ts'中编写了一个方法getDataMethod((。 当有人从 html 页面单击提交按钮时，我想调用此函数。

我在组件的构造函数中创建了一个服务实例，如下所示：

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

如何调用此函数？

Answer 1

您需要在组件的构造函数中创建服务的实例，然后引用该服务并调用该方法。

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

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

Answer 2

你需要为父模块或组件本身提供服务(你可以在 angular v6 中采用另一种方法，看看官方文档(，然后将其注入到你的组件中，然后你可以在click或submit事件中使用它。

组件(.ts( 文件：

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

模板 (.html( 文件：

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

尽管最好从组件内部声明的方法调用服务方法。

Answer 3

如@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>