javascript - Angular 2 - Injecting a component created by a HTML selector -

i trying access component has been created using selector within html. under impression (wrongly seems) providers existing instance , provide when injected component, misunderstanding hierarchical provider creation process.

in following, have component, uses selector within template html create instance of toplevelcomponent.

i trying access toplevelcomponent creating provider , using di push instance through constructor.

(apologies if code not perfect, have put quick example.)

@component({     selector: 'my-app',     template: '<top-level-component></top-level-component>',      directives: [toplevelcomponent],     providers: [toplevelcomponent], }) export class myapp {      constructor( private toplevelcomponent: toplevelcomponent) {      } }  @component({     selector: 'top-level-component',     template: '', }) export class toplevelcomponent {      constructor() {         console.log('constructed toplevelcomponent...');     }  } 

but, instead of getting 1 instance of toplevelcomponent passed component 2 (as evidenced 2 logs of 'constructed toplevelcomponent...' present in debug log).

if remove 'private toplevelcomponent: toplevelcomponent' constructor, 1 instance of component, don't seem able hold of this.

so have 2 questions

• how use di pass in instance of selector created component constructor of other components

or

• if don't include <top-level-component></top-level-component> in app html, how can inject html app renders correctly?

and third

• if both of above possible, recommended method?

i thinking @viewchild right method, there will(!) 1 instance of component, it's injected number of different components, don't think that's possible.

if add component providers: [...] component treated plain class. if di finds such provider when toplevelcomponent requested creates instance of component class @component(...) decorator ignored.

if component listed in directives: [...] di find them components , directives if instantiated because of matching selectors.

update

  <component-to-inject #source></component-to-inject>   <component-to-receive [injectedcomponent]="source"></component-to-receive> 

with

export class receivingcomponent {     @input() injectedcomponent: injectingcomponent;    ngoninit() {     console.log(this.injectedcomponent);   }       }