Angular 2服务方法调用-self.context.dummySer.foo不是函数

我试图从组件调用服务方法，但我一直遇到这样的错误：self.context.dummySer.foo不是函数

更新：

由于解决方案适用于其他组件，但不适用于此组件，而且没有任何意义，因此我将复制粘贴真正的“不工作组件”和服务

import { Component, OnInit, OnDestroy} from '@angular/core';
...stuff
import { UrlifyService } from '../services/urlify.service';

@Component({
  selector: 'app-editar-noticias',
  templateUrl: 'editar-noticias.component.html'
})

export class EditarNoticiasComponent implements OnInit, OnDestroy{
  ...stuff


  constructor(
    ...stuff
    public urlifySer: UrlifyService) {}

  ngOnInit(){
   ...stuff
  }
  ngOnDestroy(){
   ...stuff
  }

  ...other methods

  public urlify(titulo:string){
    this.urlifySer.urlify(titulo);
  }

}

视图：

服务：

import { Injectable } from '@angular/core';

@Injectable()
export class UrlifyService {

  urlified: string;

  constructor() { }

  urlify(str) {
    str = str.replace(/^\s+|\s+$/g, '');
    str = str.toLowerCase();

    let from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
    let to   = "aaaaeeeeiiiioooouuuunc------";
    for (let i=0, l=from.length ; i<l ; i++) {
      str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    str = str.replace(/[^a-z0-9 -]/g, '')
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-');

    this.urlified = str;
  }

}

从'@angular/core'导入{Injectable}；
@可注射（）
导出类服务{
URLIZED：字符串；
构造函数（）{}
urlify（str）{
str=str.replace（/^\s+|\s+$/g'）；
str=str.toLowerCase（）；
let from=“ááäèèèèèèèèèèèèèèèèè；
让to=“aaaaeeiiiioouunc------”；
对于（让i=0，l=from.length；i从HTML绑定直接调用服务被认为是一种不好的做法，您更愿意使用组件中的方法来处理此调用。顺便说一句，它将解决您的问题

您的代码将变成：

@Component({
  selector: 'whatever',
  templateUrl: 'whatever.html'
})
export class whateverComponent {
    constructor(public dummySer: DummyService) {}

    public dummyMethod(text: string) {
        this.dummySer.foo(text);
    } 
}

在html中，您将调用dummyMethod而不是服务

另外，我注意到它们在您的组件中不是任何导出类，您只是删除了它以向我们展示您的代码还是原始代码？错误也可能在那里。
从HTML绑定直接调用服务被认为是一种不好的做法，您更愿意使用组件中的方法来处理此调用。顺便说一句，它会的，解决你的问题

您的代码将变成：

@Component({
  selector: 'whatever',
  templateUrl: 'whatever.html'
})
export class whateverComponent {
    constructor(public dummySer: DummyService) {}

    public dummyMethod(text: string) {
        this.dummySer.foo(text);
    } 
}

在html中，您将调用dummyMethod而不是服务

另外，我注意到它们在您的组件中不是任何导出类，您是删除它来向我们展示您的代码还是原始代码？错误也可能在那里。
正如Sakuto answer中提到的，在组件中定义方法将完成您的工作

组成部分：

constructor(private dummySer: DummyService) {}

foo(text) {
  this.dummySer.foo(text);
}

HTML:



注意：在构造函数中标记您的服务私有。
如Sakuto answer中所述，在组件中定义方法将完成您的工作

组成部分：

constructor(private dummySer: DummyService) {}

foo(text) {
  this.dummySer.foo(text);
}

HTML:



注意：在构造函数中标记您的服务为私有。
它应该可以工作，请尝试
构造函数（public dummySer:DummyService）{console.log（dummySer）；}
它正确地记录了服务。但它在视图中仍然不起作用…你能在plunker上复制它吗？你使用AOT补偿吗？很难在plunker上实现，因为它是一个带有数据库的生产项目。不过，我用真实的组件和服务更新了这个问题。它应该可以工作，请尝试
构造函数（公共dummySer:DummyService）{console.log（dummySer）；}
它正确地记录了服务。但它在视图中仍然不起作用……你能在plunker上复制它吗？你使用AOT补偿吗？在plunker上实现它很困难，因为它是一个带有数据库内容的生产项目。不过，我用真实的组件和服务更新了问题。我不知道这是一个糟糕的做法。给我打电话方法调用一个方法感觉是多余的…但无论如何，我从现在开始会这样做。虽然它不能解决问题，但错误只是更改为“this.dummySer.foo不是函数”。最奇怪的是，从另一个组件以相同的方式调用相同的服务是有效的。您必须将每个职责/模块分开，您的服务仅用于检索数据，而您的组件用于显示数据。您的组件检索要显示的数据，而不是HTML。否则，代码中的更新将是一件痛苦的事情。此外，我t允许您轻松地在代码中添加更多进程。我不知道这是一种不好的做法。调用方法来调用方法感觉是多余的…但无论如何，我从现在起将这样做。但这并不能解决问题，错误只是更改为“this.dummySer.foo不是函数”。最奇怪的是，从另一个组件以相同的方式调用相同的服务是有效的。您必须将每个职责/模块分开，您的服务仅用于检索数据，而您的组件用于显示数据。您的组件检索要显示的数据，而不是HTML。否则，代码中的更新将是一件痛苦的事情。此外，我t允许您轻松地在代码上添加更多进程。也许您应该编写
this.dummySer.foo
而不是像我告诉Sakuto的那样编写
dummySer.foo
，此解决方案只会将错误更改为“this.dummySer.foo不是函数”。但最奇怪的是，另一个调用服务的组件使用相同的代码以这种方式工作……也许你应该编写
this.dummySer.foo
，而不是像我告诉Sakuto的那样编写
dummySer.foo
，这个解决方案只会将错误更改为“this.dummySer.foo不是函数”.但最奇怪的是，另一个具有相同代码的组件调用该服务的工作方式是这样的。。。