ERROR TypeError: Cannot read property 'createText' of null in ngx-bootstrap with angular 6

混江龙づ霸主 提交于 2021-02-07 18:42:44

问题


I want to open ngx-bootstrap modal from a different component using @ViewChild in angular 6 but I am getting this error.

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

And in in Inspect Element this tag is also visible

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

回答1:


You can use the selector to call other component on a modal in view and use

  • @Input() to send data inside the called component
  • @Output() EventEmitter to return data from the called component
  • OnChanges to bind change in the called component

Like the example below

Here is the first 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
  }
}

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">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <app-product [product]=dataTopass (afterAdd)="callAfterAdd(modifiedProduct)"></app-product>
  </div>
</ng-template>



回答2:


From where do you try acces the child and when ?

Try open it in the AfterViewInit() lifecycle, because maybe he is not init when try to accec to it.




回答3:


This error occurred when we pass any other object in show method instead of modalview. Please check below code for reference.

this.modalRef = this.modalService.show(this.modalView, Object.assign({}, { class: 'gray modal-md modal-dialog-centered' }));


来源:https://stackoverflow.com/questions/52759104/error-typeerror-cannot-read-property-createtext-of-null-in-ngx-bootstrap-with

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!