如何解析Angular 2中动态添加的组件的值？

Question

I have modal component consists of device information in which i am dynamically adding user <user.component.ts> given below. It's getting added & rendered successfully but somehow i am unable to fetch the details of selected user in modal <modal.component.ts> .

modal.component.ts

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html'
})
export class ModalComponent {
    constructor(injector: Injector, 
            componentFactoryResolver: ComponentFactoryResolver) {}

    @ViewChild('userContainer', { read: ViewContainerRef }) userContainer: ViewContainerRef;
    cmp: ComponentRef<UserListComponent>;

    addComponent() {
        const factory = this.componentFactoryResolver.resolveComponentFactory(UserListComponent);
        this.cmp = this.userContainer.createComponent(factory);
    }
}

user.component.ts

@Component({
  selector: 'user',
  templateUrl: `<select [(ngModel)]="user">
           <option *ngFor="let user of users" [ngValue]="user">{{user.name}}</option>
         </select>`
})
export class UserComponent {...}

Answer 1

Use an EventEmitter or Observable that emits values on change

@Component({
  selector: 'user',
  templateUrl: `<select [(ngModel)]="user">
           <option *ngFor="let user of users" [ngValue]="user">{{user.name}}</option>
         </select>`
})
export class UserComponent {
    @Output() userChange:EventEmitter = new EventEmitter();

    private _user:any;
    get user () {
      return this._user;
    }

    set user(val) {
      this._user = val;
      this.userChange.emit(val);
    }
}

and subscribe to the changes like:

addComponent() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(UserListComponent);
    this.cmp = this.userContainer.createComponent(factory);
    this.cmp.instance.userChange.subscribe(val => console.log(val));
}