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向父级位置注入动态组件,但我收到错误:
在我试图注入的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(); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |