在 Angular 2 中单击按钮时接收服务数据

Question

我正在处理 angular 中的服务 2. 我需要在单击按钮时调用该服务。我能够访问组件的构造函数。我知道构造函数会在组件创建后立即执行。但是我在构造函数中所做的同样的事情我无法通过单击按钮进行访问。我需要将服务 return 字符串值设置为属性。下面是我的代码..

import { Component } from '@angular/core';
import {MyFirstServiceClass} from './FirstService.service'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  svcdata : string;
  constructor(private  servtest : MyFirstServiceClass )
  {    
      this.svcdata =  servtest.SayHelloToService();
  }
  ServiceOnButtonClick(){
    // How to access here  servtest.SayHelloToService(); I tried But not 
     //able to access
  }
}

我的模板代码：

<div style="text-align:center">
  Show service data : {{svcdata}} <br/>
  <button id='btn' (click)='ServiceOnButtonClick()'>Click Me ! </button>
</div>

我的服务代码：

import {Injectable} from '@angular/core'
@Injectable()
export class MyFirstServiceClass{
  SayHelloToService(){      
      return 'Hello, welcome your service...';
  }
}

Answer 1

如果要通过服务访问，需要通过this调用。

ServiceOnButtonClick() {
    this.servtest.SayHelloToService();
}

如果您已经在构造函数中获得了值 - 只需

ServiceOnButtonClick() {
    this.svcdata;
}

Answer 2

只需在方法 ServiceOnButtonClick 中使用 this

调用它

constructor(private  servtest : MyFirstServiceClass )
{    

}
ServiceOnButtonClick(){
    this.svcdata =  this.servtest.SayHelloToService();
}

Answer 3

以上答案有效。如果有人有 httpClient 调用服务 URL，我们需要稍作修改。

constructor(private  servtest : MyFirstServiceClass )
{    

}
ServiceOnButtonClick() {
    this.servtest.SayHelloToService().subscribe((data:  Array<object>) => {
      this.svcdata = data;

  });
}

在 Angular 2 中单击按钮时接收服务数据

Receive service data on button click in Angular 2

angular2-services

angular