Как передать параметры @Input() в угловой компонент 2, созданный с помощью DynamicComponentLoader

Question

Документы DynamicContentLoader не объясняют, как я могу правильно загружать входные данные дочернего компонента. Скажем, у меня есть ребенок, как:

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

и родителей, как:

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

Как я должен идти о прохождении thing в компонент ребенка таким образом, что два компонента могут быть данные, связанные с тем же вещь.

Я пытался сделать это:

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

Это вроде работает, но они не синхронизированы, как можно было бы ожидать.

В основном я пытаюсь достичь того же, что было бы достигнуто с помощью ng-include в угловом 1, где ребенок является динамически определенным компонентом и разделяет модель с ее родителем.

Заранее спасибо ...

Answer 1

Я сделал несколько тестов для вашей проблемы, и я не могу воспроизвести его.

Вот содержание моего ребенка компонента:

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

    constructor() { 
    } 
} 

Вот содержание родительского компонента:

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

Поэтому у меня есть два входа, связанные в том же элементе: один внутри родительский компонент и один в дочернем. Когда я обновляю значение на одном входе, другое значение обновляется на другом входе.

Таким образом, оба компонента имеют один и тот же экземпляр и могут его обновлять. Возможно, я пропустил что-то в вашем прецеденте, поэтому не стесняйтесь говорить мне!

Надеется, что это помогает вам, Тьерри