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

Документы 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 в angular 1, где ребенок является динамически определенным компонентом и разделяет модель с ее родителем.

Спасибо заранее...

Ответы

Ответ 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;
    });
  }
}

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

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

Надеюсь, это поможет вам, Thierry