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

Question

我有模态组件由设备信息组成，其中我动态添加下面给出的用户<user.component.ts>。它已成功添加&呈现，但不知何故，我无法获取在模式<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

使用一个EventEmitter或Observable发射上变化值

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

并订阅以下更改：

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