angular – 无法使用ViewContainerRef读取未定义的属性“createComponent”

前端之家收集整理的这篇文章主要介绍了angular – 无法使用ViewContainerRef读取未定义的属性“createComponent”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用@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);

解决方法

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

ngAfterViewInit() {
    this.computeAvailableColors();
}

猜你在找的Angularjs相关文章