Угловые 2 Динамические компоненты не могут использовать входные данные от родителя, но я вижу его

Question

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

РОДИТЕЛЕЙ:

dcl.loadAsRoot(detailComponent, '#detail', injector).then(componentRef => { 
    componentRef.instance.item = "milano" 
}) 

РЕБЕНОК:

console.log(this) // I see here: item: "milano" 
console.log(this.item) // I get: "undefined" 
console.log(_.keys(this)) // I see all keys, but not the "item" key 

Как я могу получить доступ к "this.item" в ребенка, который загружается динамически?

PS. Я также попытался добавить элемент @Input вверху, и он тоже не работает.

Answer 1

От https://github.com/angular/angular/issues/6370#issuecomment-193896657

при использовании loadAsRoot вам нужно вызвать обнаружение изменений и вручную соединять входы, выходы, Инжектор, и компонент отчуждать функция

function onYourComponentDispose() { 
} 
let el = this.elementRef 
let reuseInjectorOrCreateNewOne = this.injector; 
this.componentLoader.loadAsRoot(YourComponent, this.elementRef, reuseInjectorOrCreateNewOne, onYourComponentDispose) 
.then((compRef: ComponentRef) => { 
    // manually include Inputs 
    compRef.instance['myInputValue'] = {res: 'randomDataFromParent'}; 
    // manually include Outputs 
    compRef.instance['myOutputValue'].subscribe(this.parentObserver) 
    // trigger change detection 
    cmpRef.location.internalElement.parentView.changeDetector.ref.detectChanges() 
    // always return in a promise 
    return compRef 
}); 

Смотрите также
- https://github.com/angular/angular/issues/7453#issuecomment-193138587
- https://github.com/angular/angular/issues/6071#issuecomment-202765309