如何从html文件调用服务方法？

Question

让我们解释一下我的代码，我有一个组件文件和一个服务文件

首先，我从组件将值传递给服务文件的方法，并将这些值作为全局变量存储在服务文件中。

其次，我正在调用组件文件中的另一种方法，并且我正在尝试访问我之前存储的全局变量。

我的代码如下

组件文件

import { NewService } from './new.service';



@Component({
selector: 'test',
templateUrl: './passwordPolicy.html',
providers: [FormErrorService]
})
export class TestComponent implements OnInit {

    obj1 = {"val":1,"val2":2};
    obj2 = {"val":1,"val2":2};

    constructor(private ns: NewService,) {

    }
    ngOnInit(){
        this.ns.firstMethod(this.obj1,this.obj1);
    }

    keyCheck(){
        this.ns.secondMethod();
    }

}

服务档案

export class NewService{
    Sobj: any;
    Sobj2: any;
    firstMethod(v1,v2){
        this.Sobj = v1;
        this.Sobj2 = v2;        
    }
    secondMethod(){
        console.log(this.Sobj);
        console.log(this.Sobj2);
    }
}

和模板文件

<button (click)='keycheck()'>Enter</button>

单击按钮时，我会收到包含值的 console.log 。

---

现在我的问题是我正在尝试从 Html 文件调用服务方法，如下所示

组件文件

    sMet:any;
    constructor(private ns: NewService,) {
        this.sMet = this.ns.secondMethod;
    }

html 文件是

<button (click)='sMet()'>Enter</button>

但上面的代码给出的服务对象未定义。怎么称呼呢.?

演示

Answer 1

在组件构造函数中将服务声明为公共服务

constructor(public ns: NewService) { }

然后就可以直接在HTML中使用了

<button (click)="ns.secondMethod()">button</button>

Answer 2

你不需要使用类似的东西sMet()

直接使用

<button (click)='ns.secondMethod()'>Enter</button>

参考stackblitz的代码

如果您想使用某个变量，请按以下方式使用，

sMet = () => this.ns.secondMethod();

在 HTML 中，

<button (click)='sMet()'>Enter</button>

如果您想使用与演示 stackblitz 中描述的相同方式，请将secondMethod()testService 中的 设为箭头函数，如下所示。

   secondMethod = () => {
        console.log(this.Sobj);
        console.log(this.Sobj2);
    }

这是您编辑的stackblitz代码