Question

我有这个组件

export class Component1Component implements OnInit {

public greetings: string ="";

constructor(private greeter: Greeter) { }

ngOnInit() {
   this.greetings =  this.greeter.sayHello();
}

}

Greeter类定义为

export class Greeter{ 
  private hello_greetings = "Hello";
  constructor(){} 
  public sayHello():string {
    return this.hello_grittings;
  }
 }

Greeter课程由工厂提供：

export function GreeterFactory():Greeter { return new Greeter(); }

@NgModule({
    providers: [                               
        { provide: Greeter,          
          useFactory: GreeterFactory,
          multi: true                       
        }
  ]
})

加载Component1时，出现此错误：

AppComponent.html：1 ERROR TypeError：this.greeter.sayHello不是功能在Component1Component.ngOnInit（component1.component.ts：36）

如果我在OnInit方法中打印this.greeter，我会得到这个输出：

[{ “hello_greetings”： “你好”}]

因此，看起来正在正确注入类，但由于某些原因，在运行时未找到这些方法。

可以找到整个项目here

提前感谢您的帮助

Answer 1

您需要从提供商处删除multi: true。该标志表示该对象将作为数组注入。这正是您在控制台输出中看到的内容：[{"hello_greetings":"Hello"}]（请注意[]）。

Answer 2

您为Greeter服务提供了multiple: true选项，因此允许多个服务实例，而角度将它们作为一个实例数组注入。

您必须将multi: true更改为multi: false或省略它。

Answer 3

这是因为greeter是Greeter个实例的数组，为了使类型更正，它应该像

一样注入

constructor(@Inject(Greeter) private greeter: Greeter[]) { }

如the reference所述，

multi？：boolean

如果为true，则inject返回一个实例数组。这很有用   允许多个提供商分布在许多文件中提供   配置信息到公共令牌。

如果它应该是多提供者，那么应该在其中一个实例this.greeter[0].sayHello()上调用该方法。如果不是，则不应指定multi。

TypeError：this。<class>。<function>不是函数

3 个答案: