Question

我想在组件1的帮助下打开或关闭另一个模块的模态。但是目前我无法访问该组件中模态的ngBootstrap的modalRef，以便我可以关闭/打开它。

假设这个场景

一个模块

<component1></component1>

另一个模块 这个模块有多个组件，每个组件都有模态，我需要根据组件1的条件显示或隐藏它。

<component2> //have ng bootstrap modal in it </component2>
<component3> //have ng bootstrap modal in it </component3>
<component4> //have ng bootstrap modal in it </component4>
<component5> //have ng bootstrap modal in it </component5>
<component6> //have ng bootstrap modal in it </component6>

目前我这样做只需在该模块中放入一个隐藏按钮，然后使用另一个组件中的JavaScript单击它，我知道这不是一个好方法所以我希望有人给我一些方法来调用这些模态或者告诉我设计是否有任何改变。

据我所知，我认为服务会很好。但在改变设计之前我想要一些意见。感谢

Answer 1

使用Observable创建服务并触发并发出哪个用户单击关闭按钮。

单击关闭按钮后，可以在任何其他组件中捕获事件并执行操作。

<强>服务

@Injectable()
export class SomeService {
   public popup: Subject<any> = new Subject<any>();

  constructor() {}
}

组件，其中包含要关闭的模式。

constructor(SomeService: SomeService){
  this.SomeService.popup.subscribe((val)=>{
     if(val === 'close') {
       // close the modal
     }
   });
}

现在，从其他组件中，您可以触发事件以关闭模型。你可以从任何组件执行关闭。

constructor(private SomeService: SomeService) {}

SomeMethod() {
  this.someService.popup.next('close');
}

Answer 2

我刚遇到同样的问题并发现这个帖子， Aniruddha Das 在突出基本要求方面表现出色，但我发现它错过了TemplateRef的用法，下一点，以防万一其他人有这个问题，我会完成它。使用与Aniruddha的相同模型

<强>模板：

<ng-template #updatemodal>
  <div class="modal">
    stuff here...
  </div>
</ng-template>

<强>组件：

@ViewChild('updatemodal')
private modalRef: TemplateRef<any>;

private myModal<any>;

constructor(SomeService: SomeService, modalService: NgbModal){
  this.SomeService.popup.subscribe((val)=>{
     if(val === 'open') {
       this.myModal = this.modalService.open(this.modalRef);
     }
   });
}

引用已创建的模式是在响应中允许更多使用和灵活性并使用以下方法的好方法：

this.myModal.result.then((result) =>{
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });

来自NgBootstrap网站

Answer 3

在app.module.ts：

{
    ...
    imports [...],
    entryComponents: [ModalComponent],
    ...
}

编写您的模型，作为内容＆＃34;组件作为内容＆＃34;来自here。
在使用模态的组件中：
- 导入ModalComponent和依赖项
- 构造函数（private modalService：NgbModal）
- 最好把它放到一个方法中：
```
const modal = this.modalService.open(ModalComponent);
modal.componentInstance.title = "Dialog";
modal.componentInstance.body = "Your message";
```

Answer 4

问题是模块可以使用NgbModule，而不是应用程序中的其他模块。当导入模块（此处为NgbModule）时，它仅适用于该模块。因此，您必须在另一个模块中包含NgbModule，或者在当前模块中导出该模块，并在另一个模块中导入当前模块。

将其导入其他模块

@NgModule({
  imports: [
    NgbModule,
  ],

或者导入已包含NgbModule模块的secound中的第一个模块。

Answer 5

使用单件服务。为了能够从服务中打开模态，请将BsModalService注入构造函数。然后，调用模态服务的.show（）方法。将TemplateRef或组件作为第一个参数传递，并将其配置为第二个参数（可选）。 .show（）方法返回带有.hide（）方法和内容属性的BsModalRef类的实例，您可以在其中找到您已经传递给服务的组件。

组件：

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

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

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

模板：

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

<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">
    This is a modal.
  </div>
</template>

然后只需使用此服务在您的应用中显示/隐藏模态。来自文档站点的信息： https://valor-software.com/ngx-bootstrap/#/modals#service-template

Answer 6

看到这个答案，您可以创建一个没有任何外部库的自定义模式： Angular 2.0 and Modal Dialog

如何从另一个组件打开ng bootstrap模式？

6 个答案: