typescript – Angular2将父服务注入子级

前端之家收集整理的这篇文章主要介绍了typescript – Angular2将父服务注入子级前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
鉴于我有简单的应用程序组件:

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是root组件,所以我不允许使用@Input()(这就是为什么[configuration] =“configuration”不起作用的原因(遵循这个答案https://stackoverflow.com/a/33155688/1168786).问题是 – 我怎么办从app组件向ng2-table组件注入一些服务,但不使用@Input().
如何将一些配置传递给我的ng2-table,甚至更简单,如何从node_modules初始化组件,这需要构造函数中的一些配置?

这是组件链接:@L_301_1@

解决方法

@Input配置中的@Input;缺少()它应该是

@Input() configuration;

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

Plunker example

猜你在找的Angularjs相关文章