Angular2: Hai chiều dữ liệu bắt buộc đối với thành phần tự động chèn sử dụng DynamicComponentLoader

Question

Tôi đang phát triển một ứng dụng Angular2, và tôi phải đối mặt với một vấn đề:

Tôi có một tập các đối tượng khác nhau có thể được lựa chọn sử dụng giao diện người dùng. Mỗi đối tượng này có một bộ các tùy chọn (khác nhau cho các đối tượng khác nhau) có thể được chỉnh sửa bằng cách sử dụng giao diện người dùng. Bây giờ, tôi đang sử dụng DynamicComponentLoader để chèn một thành phần cụ thể cho đối tượng được chọn hiện tại, vì vậy nó có thể xử lý các tùy chọn của nó một cách chính xác. Vấn đề là tôi không biết cách liên kết dữ liệu của đối tượng được chọn hiện tại với thành phần tùy chọn được chèn động.

@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 là một plunker để giúp bạn hiểu được câu hỏi của tôi:

Answer 1

Với angular2 và Rxjs, "Observables" hầu như lúc nào cũng là câu trả lời.

Nếu tôi hiểu vấn đề của bạn một cách chính xác, bạn cần phải thực hiện DynamicComponent của bạn một "Observer" và container của bạn "một Observable hoặc thậm chí tốt hơn một Subject (Trong trường hợp container của bạn cần phải đăng ký để có thể quan sát khác để nhận được lựa chọn từ)". Sau đó, sau khi tải thành phần động của bạn, hãy đăng ký nó vào vùng chứa của bạn.

Bất cứ khi nào lựa chọn thay đổi trên vùng chứa của bạn, bạn sẽ đẩy lựa chọn mới cho người đăng ký của mình. Bằng cách này, bạn có thể tải nhiều thành phần động và tất cả sẽ nhận được push của bạn.

Các container:

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

Sau đây là bạn plunker làm việc, kể sửa của tôi, "Tôi đã thay đổi cung cấp hàng nhập khẩu đến beta.6 góc mới nhất"

Tôi biết đây là một câu hỏi khá cũ. Nhưng hy vọng ai đó sẽ được hưởng lợi từ câu trả lời này.

Answer 2

Dưới đây là những gì bạn có thể làm, hãy di chuyển mã của bạn từ constructor đến ngOnInit và sử dụng lời hứa để gán giá trị động.

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