加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:44:36 所属栏目:安全 来源:网络整理
导读:我正在尝试使用@ViewChild向父级位置注入动态组件,但我收到错误: Cannot read property ‘createComponent’ of undefined 在我试图注入的ReferenceTableComponent组件上我有 @Component({selector: 'app-reference-table',templateUrl: './refTable.compon
我正在尝试使用@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();
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读