Come passare i parametri @Input() a un componente angolare 2 creato con DynamicComponentLoader

Question

I documenti di DynamicContentLoader non spiegano come caricare correttamente gli input di un componente figlio. Diciamo che ho un bambino come:

@Component({ 
    selector: 'child-component', 
    template: '<input type="text" [(ngModel)]="thing.Name" />' 
}) 
class ChildComponent { 
    @Input() thing : any; 
} 

e un genitore come:

@Component({ 
    selector: 'my-app', 
    template: 'Parent (<div #child></div>)' 
}) 
class MyApp { 
    thing : any; 
    constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) { 
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child'); 
    } 
} 

Come devo fare per passare thing nella componente figlio tali dati che i due componenti possono essere vincolati contro lo stesso cosa.

Ho provato a fare questo:

@Component({ 
    selector: 'my-app', 
    template: 'Parent (<div #child></div>)' 
}) 
class MyApp { 
    thing : any; 
    constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) { 
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child').then(ref => { 
     ref.instance.thing = this.thing; 
    }); 
    } 
} 

E 'sorta di opere, ma non sono sincronizzati come ci si aspetterebbe.

Fondamentalmente sto cercando di ottenere la stessa cosa che sarebbe stata ottenuta utilizzando ng-include in angular 1 dove il bambino è un componente determinato dinamicamente e condivide il modello con il suo genitore.

Grazie in anticipo ...

Answer 1

ho fatto alcuni test per il vostro problema e non riesco a riprodurla.

Ecco il contenuto della mia componente figlio:

@Component({ 
    selector: 'child-component', 
    template: ` 
    <div> 
     Child component - <input type="text" [(ngModel)]="thing.name" /> 
    </div> 
    ` 
}) 
export class ChildComponent { 
    @Input() thing : any; 

    constructor() { 
    } 
} 

Ecco il contenuto del componente principale:

@Component({ 
    selector: 'my-dyn-parent', 
    template: ` 
    <div> 
     Parent component - <input type="text" [(ngModel)]="thing.name" /> (<br/> 
     <div #child></div> 
     <br/>) 
    </div> 
    ` 
}) 
export class ParentComponent { 
    thing : any; 
    constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) { 
    this.thing = { name: 'test name' }; 
    dcl.loadIntoLocation(ChildComponent, elementRef, 'child') 
        .then((compRef:ComponentRef) => { 
     compRef.instance.thing = this.thing; 
    }); 
    } 
} 

Così ho due ingressi legati sullo stesso elemento: uno all'interno della componente genitore e uno in quello figlio. Quando aggiorno il valore in un input, l'altro valore viene aggiornato nell'altro input.

Quindi entrambi i componenti condividono la stessa istanza e possono aggiornarlo. Forse mi sono perso qualcosa nel tuo caso d'uso, quindi sentiti libero di dirmelo!

Spero che ti aiuta, Thierry