以角度 6 将参数从组件发送到服务构造函数

Posted

技术标签:

【中文标题】以角度 6 将参数从组件发送到服务构造函数【英文标题】:Send parameter from component to service constructor in angular 6 【发布时间】:2019-01-16 11:47:15 【问题描述】:

我是 angular6 的新手,当我将参数从组件发送到服务时,我得到 StaticInjectorError。怎么了?

我的代码是这样的 组件:

import  Component, Input, OnInit  from '@angular/core';
import  myService  from '../../@core/data/myService';
@Component(
  selector: 'table',
  templateUrl: './table.component.html'
)
export class TableComponent implements OnInit 
  constructor(private service: myService) 
  
  ngOnInit() 
    this.service = new myService ("name");

服务:

 import  Injectable, Inject  from '@angular/core';
    import  Observable  from 'rxjs/Observable';
    import  DataService  from './data.service';

    @Injectable() export class myService 

        constructor(
            entityName: string,
        ) 
            console.log(entityName);
        
    

app.module.ts:

import  myService  from './@core/data/myService '
import  TableModule  from './pages/table/table.module';

@NgModule(
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,

    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    myService,
    TableModule
  ],
)
export class AppModule 

错误信息: ProductsComponent.html:1 ERROR 错误:StaticInjectorError(AppModule)[BDBaseService -> String]: StaticInjectorError(平台:核心)[BDBaseService -> 字符串]: NullInjectorError:没有字符串的提供者! 在 NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979) 在 resolveToken (core.js:1232) 在 tryResolveToken (core.js:1182) 在 StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077) 在 resolveToken (core.js:1232) 在 tryResolveToken (core.js:1182) 在 StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077) 在 resolveNgModuleDep (core.js:9238) 在 _createClass (core.js:9283) 在 _createProviderInstance$1 (core.js:9255)

【问题讨论】:

显示 app.module.ts 文件。 【参考方案1】:

你不这样做this.service = new myService ("name");。服务是在某处提供服务的那一刻创建的。在你的情况下,在app.module.ts。这意味着在整个应用程序中只会使用此服务的一个实例。如果您想要多个实例,则必须在模块或组件中再次提供它。如果在不同的级别(例如在 app.module 和组件中)多次提供服务,则使用最底层提供的服务。

要在组件中提供服务,只需在 @Component 装饰器中添加一行:

@Component(
    selector: 'table',
    templateUrl: './table.component.html',
    providers: [myService], // <---
)

如果你在构建这个服务时绝对需要传递一些值,请参阅this answer(我希望它仍然是实际的)

【讨论】:

哦,顺便说一句,不要使用table选择器。对于obvious reasons 不确定这是如何解决问题的。它是关于带有参数化构造函数的服务,而不是关于如何实例化服务。

以上是关于以角度 6 将参数从组件发送到服务构造函数的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 2 中调用其构造函数之前将数据发送或绑定到子组件?

从角度应用程序访问角度库 - 角度组件中的 StaticInjectorError 与构造函数中的 ElementRef

如何在角度2的组件之间传递用户输入数据?

PDO:获取类选项以将字段作为数组发送到构造函数

Laravel:是不是可以在组件构造函数中使用 Spread 运算符?

由于构造函数中的组件,角度单元测试失败。