首页 文章

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

提问于
浏览
3

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

假设这个场景

One Module

<component1></component1>

Another Module 这个模块有多个组件,每个组件都有模态,我需要根据组件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单击它,我知道这不是一个好方法所以我希望有人给我一些方法来调用这些模态或者告诉我如果设计有任何改变 .

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

6 回答

  • 0

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

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

    Service

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

    Component 有模态要关闭 .

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

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

    constructor(private SomeService: SomeService) {}
    
    SomeMethod() {
      this.someService.popup.next('close');
    }
    
  • 1

    我刚刚遇到同样的问题并发现了这个帖子, Aniruddha Das 在突出基本要求方面做得很好,但我发现它错过了TemplateRef的使用,这是下一位,以防其他人有这个问题我'll finish it. using the same model as Aniruddha' s

    Template:

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

    Component:

    @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网站

  • 1
    • app.module.ts
    {
        ...
        imports [...],
        entryComponents: [ModalComponent],
        ...
    }
    
    • here编写模型,作为"Components as content"的一部分 .

    • 在使用模态的组件中:

    • 导入ModalComponent和依赖项

    • 构造函数(private modalService:NgbModal)

    • 最好把这个放到一个方法中:

    const modal = this.modalService.open(ModalComponent);
    modal.componentInstance.title = "Dialog";
    modal.componentInstance.body = "Your message";
    
  • -1

    问题是 NgbModule 可用于模块而不是应用程序中的其他模块 . 当导入模块(此处为 NgbModule )时,它仅特定于该模块 . 因此,要么必须在另一个模块中包含 NgbModule ,要么将其导出到当前模块中,然后在另一个模块中导入当前模块 .

    将其导入其他模块

    @NgModule({
      imports: [
        NgbModule,
      ],
    

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

  • 1

    使用单件服务 . 为了能够从服务中打开模态,请将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

  • -2

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

相关问题