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文件中调用service方法，如下所示

组件文件

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

并且html文件是

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

但是上面的代码给出了服务的对象未定义。怎么称呼？？

Demo

Answer 1

您无需使用类似sMet()

直接使用

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

请参阅stackblitz

上的代码

如果要使用一些变量，请按以下方式使用

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

在html中，

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

如果您想使用演示堆栈闪电战中所述的相同方法，请在testService中将secondMethod()用作箭头函数，如下所示。

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

这是您编辑的stackblitz代码

Answer 2

尝试这样的事情：

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

constructor(private ns: NewService) {}

基本上，不用分配服务方法，而是用组件方法包装它。

Answer 3

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

constructor(public ns: NewService) { }

然后您可以直接在HTML中使用它

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

Answer 4

首先将服务注入组件的构造器

C:\Users\MCOT\source\repos\WindowsApp3\packages\VideoLAN.LibVLC.Windows.3.0.6\build\x86

用于访问全局变量

constructor(public newService: NewService) { }

用于访问服务方法：

<button (click)="newService.sobj">

最好的问候！

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

4 个答案: