错误TypeError:无法在角度为6的ngx-bootstrap中读取null的属性'createText' [英] ERROR TypeError: Cannot read property 'createText' of null in ngx-bootstrap with angular 6
问题描述
我想在角度6中使用 @ViewChild
从其他组件打开ngx-bootstrap模态,但出现此错误.
I want to open ngx-bootstrap modal from a different component using @ViewChild
in angular 6 but I am getting this error.
错误TypeError:无法读取null的属性'createText'在ComponentLoader.push ../node_modules/ngx-bootstrap/component-loader/component-loader.class.js.ComponentLoader._getContentRef
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中,此标记也可见
And in in Inspect Element this tag is also visible
<bs-modal-backdrop class="modal-backdrop fade in"></bs-modal-backdrop>
推荐答案
您可以使用选择器在视图中调用模态上的其他组件并使用
You can use the selector to call other component on a modal in view and use
-
@Input()
在被调用的组件内部发送数据 -
@Output()
EventEmitter从被调用的组件返回数据 -
OnChanges
以将更改绑定到被调用组件中
@Input()
to send data inside the called component@Output()
EventEmitter to return data from the called componentOnChanges
to bind change in the called component
就像下面的例子一样
这是第一个组成部分:
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
中调用的另一个组件:
Here is the other component to call inside 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);
}
}
这是第一个组件的视图:
Here's the view of the first component:
<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">×</span>
</button>
</div>
<div class="modal-body">
<app-product [product]=dataTopass (afterAdd)="callAfterAdd(modifiedProduct)"></app-product>
</div>
</ng-template>
这篇关于错误TypeError:无法在角度为6的ngx-bootstrap中读取null的属性'createText'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!