typescript - Angular2 injicera föräldratjänst i barn

Givet att jag har en enkel app-komponent:

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, []);

och ng2-table, som installeras via npm install, och placeras i node_modules-katalogen.

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
  }
}

och denna konfigurationstjänst:

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";
}

I app-komponenten la jag in ng2-table-komponenten. ng2-table och app är rotkomponenter, så jag får inte använda @Input() (detta är anledningen till att [configuration]="configuration" inte fungerar (enligt detta svar https://stackoverflow.com/a/33155688/1168786).
Frågan är - hur injicerar jag någon tjänst från app-komponenten till ng2-table-komponenten utan att använda @Input().

Hur skickar jag någon konfiguration till min ng2-table, eller ännu enklare, hur kan jag initiera en komponent från node_modules som förväntar sig någon konfiguration i konstruktorn?

Detta är komponentlänken: https://github.com/ssuperczynski/ng2-easy-table/tree/master/app

Svar #1

Angulars beroendeinjektion kommer att tillhandahålla samma instans av ConfigService till barnkomponenten som till föräldrakomponenten så länge det inte uttryckligen anges i barnkomponentens providers-egenskap. Detta beror på Angulars hierarkiska DI-modell, du kan hitta mer information i deras dokumentation. Baserat på kodexemplen ser det ut som att ConfigService kanske inte använder DI, så du kanske vill överväga att göra den till en Injectable också: DI-info

Svar #2

@Input i @Input configuration; saknar () det borde vara

@Input() configuration;

Jag kopierade din kod till Plunker och att lägga till () löste det.

Plunker-exempel

Relaterade artiklar