了解Angular中的多提供者

Question

我试图理解Angular中多提供者的概念。

＆＃34;对于多个提供商，我们基本上可以扩展为特定令牌注入的内容＆＃34;

所以我试图通过代码来理解它，如下所示

但是当我运行它时，会抛出错误 this.ts.testdisplay不是函数

请有人能解释一下这个错误吗？

由于

   //our root app component
import {Component, NgModule, ViewContainerRef, ViewChild,Inject} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

function dummyFactory()
{
return {
  display:function()
  {
    return "Dummy"
  }
}
}


export class TestService
{
  testdisplay():string
  {
    console.log("I am a test service")
    return "Ankit Dwivedi";
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      Checking USE Factory
      {{name}}

    </div>
  `,
})
export class App {

  name:string;
  constructor(@Inject(TestService) private ts)
  {
     console.log(this.ts)
     this.name = this.ts.testdisplay() 
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ],
  providers:[{provide:TestService,useFactory:dummyFactory,multi:true}]
})
export class AppModule {}