首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Angular2将父服务注入子服务

Angular2将父服务注入子服务
EN

Stack Overflow用户
提问于 2016-04-09 14:52:01
回答 5查看 8K关注 0票数 6

考虑到我有简单的app组件:

代码语言:javascript
代码运行次数:0
运行
复制
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目录中。

代码语言:javascript
代码运行次数:0
运行
复制
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
  }
}

这个配置服务:

代码语言:javascript
代码运行次数:0
运行
复制
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-tableapp是根组件,所以我不允许使用@Input() (这就是[configuration]="configuration"不能工作的原因(按照这个答案https://stackoverflow.com/a/33155688/1168786)。

问题是--如何将一些服务从app组件注入到ng2-table组件中,但不使用@Input()

如何将一些配置传递给我的ng2-table,甚至更简单,如何从node_modules初始化组件,这需要构造函数中的一些配置?

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

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2016-04-11 17:08:02

@Input in @Input configuration;缺少()应该是

代码语言:javascript
代码运行次数:0
运行
复制
@Input() configuration;

我将您的代码复制到柱塞中,并添加()修复了它。

柱塞实例

票数 5
EN

Stack Overflow用户

发布于 2016-04-09 15:29:53

ConfigService的依赖注入将向子组件提供与父组件相同的实例,只要它没有在子组件的providers属性中显式指定。这是由于角的层次DI模型,你可以找到更多的信息,在他们的文档。根据代码示例,看起来ConfigService可能不使用DI,因此您可能也希望将其转换为可注入的:第二信息

票数 7
EN

Stack Overflow用户

发布于 2016-04-09 15:20:46

这一行似乎不正确,因为我猜您想要计算configuration表达式:

代码语言:javascript
代码运行次数:0
运行
复制
<ng2-table [configuration]="'configuration'"></ng2-table>

我会使用以下方法来代替

代码语言:javascript
代码运行次数:0
运行
复制
<ng2-table [configuration]="configuration"></ng2-table>

此外,我将以这样的方式注入您的服务(如果它实际上是一个服务):

代码语言:javascript
代码运行次数:0
运行
复制
(...)
import {ConfigService} from "./config-service";

export class App {
  constructor(private configuration: ConfigService) {
  }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36518422

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档