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

Question

我正在尝试从组件调用服务方法，但我一直收到此错误：self.context.dummySer.foo 不是函数

更新：

由于解决方案适用于其他组件但不适用于这个组件，而且它没有任何意义，我将只复制粘贴真实的 "not working component" 和服务。

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);
  }

}

查看：

<input type="text" #titulo (blur)="urlify(titulo.value)">

服务：

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;
  }

}

该方法获取标题值并从中构建友好的 url。正如我所说，从其他组件以相同的方式调用相同的方法是可行的……但出于某种原因，它不适用于这个组件。

Answer 1

直接从 HTML 绑定调用服务被认为是一种不好的做法，最好使用组件中的方法来处理此调用。顺便说一下，它会解决你的问题。

您的代码将变为：

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

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

并且在您的 html 中，您将调用 dummyMethod 而不是您的服务。

此外，我注意到它们在您的组件中没有任何导出 class，您只是将其删除以向我们展示您的代码还是原始代码？错误也可能在那里。

Answer 2

正如 Sakuto 回答中提到的，在组件中定义方法将完成您的工作。

组件：

constructor(private dummySer: DummyService) {}

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

HTML:

<input type="text" #text (blur)="foo(text.value)">

注意：在构造函数中将您的服务标记为私有。

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

Angular 2 service method calling - self.context.dummySer.foo is not a function

angular

angular2-services