如何隐藏 ngx-bootstrap 模态而不破坏模态组件？

Question

Is there a way to hide BsModal without destroying the modal's component? What I would like to achieve is that, once the modal is shown the first time, it doesn't recreate MyComponent every time is hide/shown again. Once it is build the first time is just a matter of showing or not to the user and not rebuilding the whole component.

I need this because I would like to provide a service in the MyComponent providers and I expect the same instance of that service if I close and reopen the modal.

I have a component:

@Component({
  selector: 'my-component',
  template: '<p>Hi from my component</p>'
})
export class MyComponent implements OnInit {

  ngOnInit(): void {
    console.log('want to show this message only once');
  }
}

I'm using ngx-bootstrap modal to show this component

export class AnotherComponent() {

  private modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {}

  showModal(): void {
    this.modalService.show(MyComponent);
  }

  hideModal(): void {
    this.modalRef.hide();
  }
}

I would like to have ngOnInit() executed only the first time the modal is open.

Answer 1

So, what you are wanting might not be possible until the Ivy renderer is in production (see https://github.com/angular/angular/issues/19812 ). The current renderer uses either a TemplateRef or component reference to create the content for a dynamically created component (see https://angular.io/guide/dynamic-component-loader ). Each time this is run, the component/template is re-initialized.

This is not a problem though. If you have some piece of static data, store that in a singleton service (the services that use {providedIn: "root"} ) and then when the component is initialized, pull that data from the component. Ngx-bootstrap is using the same code Angular uses to create components at run-time. This is not a performance hit to rerun the component unless you are doing something heavy in the initialization phase. If you are, off-load that to a service and pull the results every time the component is created.