Question

鉴于我有简单的postgresql.conf组件：

app

和import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from 'ng2-easy-table/app/app.component'; import {ConfigService} from "./config-service"; @Component({ selector: 'app', directives: [AppComponent], providers: [ConfigService], template: ` <ng2-table [configuration]="configuration"></ng2-table> ` }) export class App { constructor(private configuration:ConfigService) {} } bootstrap(App, []);，通过ng2-table安装，并放在npm install目录中。

node_modules

和这个配置服务：

import {Component, OnInit, Input} from 'angular2/core';

@Component({
  selector: 'ng2-table',
})

export class AppComponent implements OnInit{
  @Input configuration;
  constructor() {
    console.log("configuration: ", this.configuration); // <-- null
  }

  ngOnInit() {
    console.log("configuration: ", this.configuration); // <-- null
  }
}

在import {Injectable} from "angular2/core"; @Injectable() export class ConfigService { public searchEnabled = true; public orderEnabled = true; public globalSearchEnabled = true; public footerEnabled = false; public paginationEnabled = false; public exportEnabled = true; public resourceUrl = "http://beta.json-generator.com/api/json/get/E164yBM0l"; }组件中，我添加了app组件。 ng2-table和ng2-table是根组件，因此我不能使用app（这就是为什么@Input()不起作用的原因（遵循此答案https://stackoverflow.com/a/33155688/1168786 ）。问题是 - 如何将[configuration]="configuration"组件中的某些服务注入app组件，但不使用ng2-table。

如何将一些配置传递给我的@Input()，或者更简单一些，如何初始化ng2-table中需要构造函数中的配置的组件？

这是组件链接：https://github.com/ssuperczynski/ng2-easy-table/tree/master/app

Answer 1

Angular的依赖注入将为子组件提供与父组件相同的ConfigService实例，只要它未在子组件的providers属性中明确指定即可。这是由于Angular的分层DI模型，您可以在docs中找到更多信息。基于代码示例，看起来ConfigService可能不使用DI，因此您可能希望将其转换为Injectable：DI info

Answer 2

@Input中的{p> @Input configuration;缺少()它应该是

@Input() configuration;

我将您的代码复制到Plunker并添加()修复它。

Plunker example

Answer 3

这一行似乎不正确，因为我想你要评估configuration表达式：

<ng2-table [configuration]="'configuration'"></ng2-table>

我会用以下代替

<ng2-table [configuration]="configuration"></ng2-table>

此外，我会以这种方式注入您的服务（如果它实际上是一项服务）：

(...)
import {ConfigService} from "./config-service";

export class App {
  constructor(private configuration: ConfigService) {
  }
}

Answer 4

为什么不简单地通过构造函数注入您在父组件中提供的服务？

您无需定义其他输入即可通过配置。这不是一个好习惯。

@Component({
  selector: 'app',
  directives: [AppComponent],
  providers: [ConfigService],
  template: `
    <ng2-table></ng2-table>
  `
})
export class App {
  constructor(private configuration:ConfigService) {}

}

然后您可以注入父提供者：

  @Component({
  selector: 'ng2-table',
})

export class AppComponent implements OnInit{
  
  constructor(private configuration:ConfigService) {
    console.log("configuration: ", this.configuration); // <-- null
  }

  ngOnInit() {
    console.log("configuration: ", this.configuration); // <-- null
  }
}

Angular2将父服务注入子级

4 个答案: