angular - 无法使用 ViewContainerRef 读取未定义的属性 'createComponent'

Question

我正在尝试使用@ViewChild 将组件动态注入(inject)到父位置，但出现错误:

Cannot read property 'createComponent' of undefined

在我尝试注入(inject)的 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>

我要注入(inject)的组件

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

Answer 1

@ViewChild() 查询在 ngOnInit() 中不可用。仅当 ngAfterViewInit() 被调用时:

ngAfterViewInit() {
    this.computeAvailableColors();
}