Question

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

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中单击按钮时接收服务数据

3 个答案: