Question

我正在尝试从组件调用服务方法，但我一直收到此错误：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);
  }

}

查看：

<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中的方法来处理此调用。顺便说一下，它会解决你的问题。

您的代码将成为：

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

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

在您的HTML中，您可以调用dummyMethod而不是您的服务。

另外，我注意到它们不是您组件中的任何导出类，您是刚删除它以向我们展示您的代码还是原始代码？错误也可能存在。

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不是函数

2 个答案: