Angular2: Dwukierunkowa wiążące składnik dane dynamicznie wstawiane za pomocą DynamicComponentLoader

Question

Zajmuję się tworzeniem aplikacji Angular2, a ja w obliczu problemu:

Mam zestaw różnych obiektów, które mogą być wybrane za pomocą interfejsu użytkownika. Każdy z tych obiektów ma zestaw opcji (różnych dla różnych obiektów), które można edytować za pomocą interfejsu użytkownika. Teraz używam DynamicComponentLoader do wstawienia konkretnego komponentu dla aktualnie wybranego obiektu, aby mógł poprawnie obsłużyć swoje opcje. Problem polega na tym, że nie wiem, jak powiązać dane aktualnie wybranego obiektu z dynamicznie wstawianym komponentem opcji.

@Component({ 
    selector: 'dynamic', 
    template: `<div>Options:</div> 
      <div>Property1: <input type="number" /></div> 
      <div>Property2: <input type="text" /></div>` 
    // template: `<div>Options:</div> 
    //   <div>Property1: <input type="number" [(ng-model)]="currentSelection.property1" /></div> 
    //   <div>Property2: <input type="text" [(ng-model)]="currentSelection.property1" /></div>` 
}) 
class DynamicComponent { 

} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Selected: {{currentSelection.name}}!</h2> 
     <div #container></div> 
    </div> 
    ` 
}) 
class App { 
    currentSelection = {name: 'Selection1', property1: 10, property2: 'test'}; 

    constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) { 
    loader.loadIntoLocation(DynamicComponent, elementRef, 'container'); 
    } 
} 

Here jest plunker pomóc zrozumieć moje pytanie:

Answer 1

Z angular2 i Rxjs, "Observables" są prawie zawsze odpowiedź.

Jeśli zrozumiałem swój problem prawidłowo, trzeba dokonać DynamicComponent „Observer” i swój pojemnik „An Observable lub nawet Lepszy Subject (W przypadku, gdy pojemnik musi zapisać się do innego obserwowalne otrzymywać produkty marki)”. Następnie, po załadowaniu komponentu dynamicznego, zasubskrybuj go do swojego kontenera.

Zawsze, gdy wybór zmienia się w Twoim kontenerze, możesz przesłać nowy wybór do subskrybentów. W ten sposób możesz załadować wiele dynamicznych komponentów i wszystkie otrzymają twoje popchnięcia.

pojemnika:

class App { 
    currentSelection = {}; 
    selections = [ 
    {name: 'Selection1', property1: 10, property2: 'test'}, 
    {name: 'Selection2', property1: 20, property2: 'test2'} 
    ]; 
    subject:Subject<any> = new Subject(); 

    constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) { 
    } 

    ngOnInit(){ 
    this.loader.loadIntoLocation(DynamicComponent, this.elementRef, 'container', this.injector) 
    .then(compRef =>this.subject.subscribe(compRef.instance)); 
    // subscribe after loading the dynamicComponent 
    } 

    // set the new selection and push it to subscribers 
    changeSelection(newSelection){ 
    this.currentSelection = newSelection; 
    this.subject.next(this.currentSelection); 
    } 
} 

The Observer:

class DynamicComponent implements Observer{ 
    public currentSelection = {}; 

    next(newSelection){ 
    this.currentSelection = newSelection; 
    } 
} 

tutaj jest plunker działać po moje edycje, "pod warunkiem, że zmienił importu do najnowszej kątowej beta.6"

Wiem, że to dość stare pytanie. Ale miejmy nadzieję, że ktoś skorzysta z tej odpowiedzi.

Answer 2

Oto, co możesz zrobić, przenieś swój kod z constructor do ngOnInit i użyj obietnic do przypisania wartości dynamicznej.

ngOnInit(){ 
    this.dynamicComponentLoader.loadIntoLocation(DynamicComponent, this.elementRef,'container').then((component)=>{ 
     component.instance.currentSelection = currentSelection; 
    }); 
}