Question

有没有一种方法可以隐藏BsModal而又不破坏模态的组件？我要实现的是，第一次显示模态后，每次重新隐藏/显示时都不会重新创建MyComponent。首次构建后，只需向用户展示或不展示，而不重新构建整个组件即可。

我需要这个，因为我想在MyComponent提供程序中提供服务，并且如果我关闭并重新打开模式，我希望该服务具有相同的实例。

我有一个组件：

@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');
  }
}

我正在使用ngx-bootstrap模态来显示此组件

export class AnotherComponent() {

  private modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {}

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

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

我只想在模态第一次打开时执行ngOnInit（）。

Answer 1

因此，在Ivy渲染器正式投入生产之前，可能无法实现您想要的一切（请参见https://github.com/angular/angular/issues/19812）。当前渲染器使用TemplateRef或组件引用为动态创建的组件创建内容（请参见https://angular.io/guide/dynamic-component-loader）。每次运行时，组件/模板都会重新初始化。

但这不是问题。如果您有一些静态数据，请将其存储在单例服务（使用{providedIn: "root"}的服务）中，然后在初始化组件时，从组件中提取该数据。 Ngx-bootstrap使用Angular在运行时创建组件的相同代码。除非您在初始化阶段进行大量操作，否则重新运行组件不会对性能造成影响。如果您愿意，则将其卸载到服务上，并在每次创建组件时提取结果。

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

1 个答案: