我正在尝试使用@ViewChild向父级位置注入动态组件,但我收到错误:
Cannot read property ‘createComponent’ of undefined
在我试图注入的ReferenceTableComponent组件上我有
@Component({ selector: 'app-reference-table',templateUrl: './refTable.component.html',styleUrls: ['./refTable.component.scss'] }) export class ReferenceTableComponent implements OnInit { observable: Observable<any>; @ViewChild('selectorTarget',{read: ViewContainerRef}) selectorTarget; // colors @Input() public datas: Array<string>; public availableColors: Array<string>; @Input() public nextRow: Array<string>; //tailles @Input() public headList: Array<string>; public rows: Array<any> = [{}]; public rowIDs: Array<any> = []; constructor(private _cr: ComponentFactoryResolver,private _viewContainerRef: ViewContainerRef) { } ngOnInit() { this.computeAvailableColors(); } addRow() { console.log('this.availableColors 2: ',this.availableColors) this.rows.push({}); } computeAvailableColors() { this.availableColors = _.concat([''],this.datas); this.rowIDs = _.map(this.rows,'color') this.availableColors = _.difference(this.availableColors,this.rowIDs); const select: ComponentRef<SelectOptionsComponent> = this.selectorTarget.createComponent( this._cr.resolveComponentFactory(SelectOptionsComponent) ); select.instance.availableColors = this.availableColors; select.instance.row = this.rows[0]; }
在我的组件html上
<td onSelectColor($event) #selectorTarget> </td>
我试图注入的组件
@Component({ selector: 'kia-select-options',template: `<div><select [(ngModel)]="row.color" (ngModelChange)="sendColorEvent(row,$event)"> // value is a string or number <option *ngFor="let obj of availableColors">{{obj}}</option> </select></div>` }) export class SelectOptionsComponent { // couleurs @Input() public availableColors: Array<string>; @Input() public row: {}; public color: string; @Output() public changed = new EventEmitter(); constructor(private injector: Injector) { } sendColorEvent(row,color) { console.log(event) this.changed.emit({ color: color,row: row }); } }
知道ReferenceTableComponent它是从父组件使用动态地自我填充,并且它工作正常
@ViewChild('target',{read: ViewContainerRef}) target; const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent); const ref = this.target.createComponent(factory);