gpt4 book ai didi

angular - 错误类型错误 : Cannot read property 'createText' of null in ngx-bootstrap with angular 6

转载 作者:太空狗 更新时间:2023-10-29 19:32:19 28 4
gpt4 key购买 nike

我想在 Angular 6 中使用 @ViewChild 从不同的组件打开 ngx-bootstrap 模式,但我收到了这个错误。

ERROR TypeError: Cannot read property 'createText' of null at ComponentLoader.push../node_modules/ngx-bootstrap/component-loader/component-loader.class.js.ComponentLoader._getContentRef

并且在Inspect Element中这个标签也是可见的

<bs-modal-backdrop class="modal-backdrop fade in"></bs-modal-backdrop>  

最佳答案

您可以使用选择器在 View 中调用模态上的其他组件并使用

  • @Input() 在被调用组件中发送数据
  • @Output() EventEmitter 从被调用组件返回数据
  • OnChanges 绑定(bind)被调用组件的变化

像下面的例子

这是第一个组件:

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
selector: 'demo-modal-service-static',
templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}

openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}

// Use change happen after modal
public callAfterAdd(modifiedProduct){
// close this.modalRef
}
}

这是在 Modal 中调用的另一个组件:

import { Component, TemplateRef , OnInit, OnChanges, Input, Output, EventEmitter, SimpleChanges} from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
selector: 'app-product',
templateUrl: './app-product.html' // put what you want in view
})
export class AppProductComponent implements OnInit, OnChanges {
@Input() product : any;
@Output() afterAdd = new EventEmitter<any>();
public id: number;
constructor(private modalService: BsModalService) {}

ngOnInit() {
}

public ngOnChanges (changes: SimpleChanges) {
console.log(this.product);// see product here
this.id = changes.product.currentValue.id;
if(this.id){
// see here if some change occur in the first component
}
}
/**
*This function returns the modified product in DemoModalServiceStaticComponent => callAfterAdd
*/
someOtherFunction(){
//change something in product
//then send the modified data to the
this.afterAdd.emit (this.product);
}
}

这是第一个组件的 View :

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<app-product [product]=dataTopass (afterAdd)="callAfterAdd(modifiedProduct)"></app-product>
</div>
</ng-template>

关于angular - 错误类型错误 : Cannot read property 'createText' of null in ngx-bootstrap with angular 6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52759104/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com