So übergeben Sie @Input() - Parameter an eine eckige 2-Komponente, die mit DynamicComponentLoader erstellt wurde

Question

Die DynamicContentLoader-Dokumentation erläutert nicht, wie die Eingaben einer untergeordneten Komponente ordnungsgemäß geladen werden können. Lassen Sie uns sagen, dass ich ein Kind haben, wie:

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

und ein Elternteil wie:

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

Wie soll ich mich über thing in die untergeordnete Komponente, so dass die beiden Komponenten vorbei gegen die gleiche gebunden Daten sein Ding.

Ich habe versucht, dies zu tun:

@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; 
    }); 
    } 
} 

Es Art funktioniert, aber sie sind wie man es erwarten würde, nicht synchronisiert.

Im Grunde versuche ich dasselbe zu erreichen, was mit ng-include in Winkel 1 erreicht worden wäre, wo das Kind eine dynamisch bestimmte Komponente ist und das Modell mit seinem Elternteil teilt.

Vielen Dank im Voraus ...

Answer 1

Ich habe einige Tests für Ihr Problem und ich kann es nicht wiedergeben kann. Hier

ist der Inhalt meines Kindes Komponente:

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

    constructor() { 
    } 
} 

Hier ist der Inhalt der Stammkomponente:

@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; 
    }); 
    } 
} 

So habe ich zwei Eingänge auf dem gleichen Element gebunden: eine innerhalb der Mutterkomponente und eine in der Kind-Komponente. Wenn ich den Wert in einer Eingabe aktualisiere, wird der andere Wert in der anderen Eingabe aktualisiert.

Also beide Komponenten teilen sich die gleiche Instanz und können sie aktualisieren. Vielleicht habe ich etwas in deinem Anwendungsfall verpasst, also sag es mir ruhig!

Hoffe, es hilft Ihnen, Thierry