Come si inietta un componente principale in un componente figlio?

Question

Sto provando a iniettare un componente padre in un componente figlio. Ho pensato che questo sarebbe stato semplice – semplicemente specificare/iniettare il componente principale del bambino constructor():

constructor(private _parent:AppComponent) {} // child component constructor 

ottengo il seguente errore:

EXCEPTION: Cannot resolve all parameters for ChildComponent(?). Make sure they all have valid type or annotations.

Che cosa mi manca?

ChildComponent:

import {Component} from 'angular2/core'; 
import {AppComponent} from './app.component'; 

@Component({ 
    selector: 'child', 
    template: `<p>child</p>` 
}) 
export class ChildComponent { 
    constructor(private _parent:AppComponent) {} 
} 

AppComponent:

import {Component} from 'angular2/core'; 
import {ChildComponent} from './child.component'; 

@Component({ 
    selector: 'my-app', 
    template: `{{title}} <child></child> 
    `, 
    directives: [ChildComponent] 
}) 
export class AppComponent { 
    title = "Angular 2 - inject parent"; 
    constructor() { console.clear(); } 
} 

Plunker

Answer 1

di comment per la risposta See @ EricMartinez. Il problema sembra essere un riferimento circolare quando A importa B e B importa A.

Ecco uno plunker che utilizza due file anziché un file che si trova in Eric's plunker.

L'unico cambiamento dal mio plunker originale si trova nella ChildComponent:

import {Component, Inject, forwardRef} from 'angular2/core'; 
.... 
constructor(@Inject(forwardRef(() => AppComponent)) private _parent:AppComponent) 

non so per certo se questo elimina il riferimento circolare, dal momento che A e B sono ancora importando un l'altro, ma sembra lavorare.

Vedi anche https://github.com/angular/angular/issues/3216, dove Miško afferma:

This [not user-friendly declaration using forwardRef()] is a limitation of JS and how the function declarations get hoisted. Whenever you have a circular dependency you will need forwardRef :-(I just don't see a away around it.

I would argue that you should not be in situation where your parent needs to know about the children and children need to know about parent. @Query should take care of most of the use cases.

I am sorry, but while I agree this is a pain in some rare cases, I don't see a way out of it, and hence this issue is not actionable, will close.

Hmm ... il motivo per cui ho cercato di iniettare il genitore era perché vedo due modi per un bambino di comunicare con un genitore:

1. il figlio definisce proprietà di output ed emette eventi, che il genitore sottoscrive a
2. il bambino inietta il genitore (ad esempio, Pane potrebbe inserire schede) e può quindi chiamare metodi sul genitore

E stavo cercando di determinare quando utilizzare ogni approccio. Miško fa sembrare 2. dovrebbe essere raro.

Aggiornamento: Ci stavo pensando un po 'di più ... 1. è migliore perché c'è meno accoppiamento tra il bambino e il genitore. Con 1. il bambino non ha bisogno di sapere (e probabilmente non dovrebbe sapere) l'API/interfaccia pubblica del genitore.
Nella direzione inversa (ad esempio, il genitore usa @ViewChild (@Query è ora deprecato) per ottenere un riferimento al figlio, quindi chiama i metodi sul figlio), l'accoppiamento va bene, perché il genitore sta usando il componente figlio, quindi ha bisogno di conoscere l'API/interfaccia pubblica del bambino: cioè, le proprietà di input e output e i metodi pubblici.