从父组件以 2/4 角度将数据传递到 ngbmodal 实例

Question

我不知道这在 Angular 2/4 中是否可行。我有一个模态组件，它又具有一个模态内容组件。我还有一个允许打开/关闭模态实例的服务。我正在使用 ngbModal。

模态内容模板需要根据布尔参数显示/隐藏一些字段。

我的页面组件有一个按钮，点击需要打开带有布尔参数的modalInstance。

这就是我所拥有的，

page.component.html

 <div class="bar-sec">
   <action-bar [options]="btnOpts" (select) = 
      "actionBarSelectHandler($event)">
   </action-bar>
</div>
<div class="grid-sec">
</div>
 **<app-ad-search [userOnly]='userOnly'></app-ad-search>**

page.component.ts

 import {Component, ViewChild} from '@angular/core';
 import { NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap';
 import { SearchModalComponent} from '../../X/search-modal.component';
 import { SearchContentComponent} from '../../X/search-content.component';
 import { XModalService} from '../../X/x-modal.service';

@Component ({
  selector: 'page-test',
  templateUrl: './page.component.html',
  providers: [XModalService]
})

 export class VCenterMachinesComponent {
   XModalService: XModalService;
   filterText: String = '';
   machines: any[];
   btnOpts: {};
   **userOnly:boolean = true;**

  **@ViewChild(SearchModalComponent) private 
       SearchModalComponent:SearchModalComponent;**

 constructor(E:XModalService) {
  this.XModalService = E;
  **this.userOnly = true;**
 }

 actionBarSelectHandler(data) {
    if (data.item.id === 'assignuser') {
        **this.XModalService.openSearchModal()**.then(() => {
            console.log('close');
        }, () => {
            console.log('dismiss');
        });
     }
  }

 ngOnInit() {
    this.machines = [];
   this.filterText = '';
   this.btnOpts = {
     data: [{
                id: "assignuser",
                label: "Assign User...",
                enabled: true
            }]
   };

  }
 }

search-modal.component.ts

    import { Component, OnInit, OnDestroy, Input } from '@angular/core';
    import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

    import { SearchContentComponent } from './search-content.component';

        @Component({
            selector: 'app-ad-search',
            template: `
                <modal-header (onClose)="activeModal.dismiss();">
                    <span>{{modalTitle}}</span>
                </atk-modal-header>
                <modal-body>
                    <search-content>
                    </search-content>
                </modal-body>
                <modal-footer [buttons] = "modalBtns" 
      (onClick)="btnClick($event)">
                </modal-footer>
            `
        })
        export class SearchModalComponent{
            @Input()
            private modalBtns: any[] | any = [{
                id: 'ok',
                label: 'OK',
                primary: true,
                disabled: true
            }, {
                id: 'cancel',
                label: 'Cancel',
                primary: true,
                disabled: false
            }];
            @Input()
            **public userOnly:boolean = false;**

            @Input()
            public modalTitle: string = (this.userOnly) ? 'XXX':'YYY';


            constructor(private activeModal: NgbActiveModal) { }

            btnClick(btn) {
                if (btn.id === 'ok') {
                    this.activeModal.close(this.selectedRows);
                } else {
                    this.activeModal.dismiss();
                }
            }


        }

search-content.component.ts

  import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from 
    '@angular/core';
            @Component({
              selector: 'ad-search-content',
              template: '<div class="form-group row" *ngIf="!userOnly">
                    <label class="col-sm-4 col-form-label">Type:</label>
                    <div class="col-sm-8">
                        <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-
       input" [(ngModel)]="filters.type.users" name="usersType">
                        </label>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-4 col-form-label">Domian:</label>      
                </div>'
            })
            export class SearchContentComponent implements OnInit, OnDestroy 
        {

                constructor() { }

                ngOnInit() {}
                ngOnDestroy() {}

            }

x-modal.service.ts

        import { Injectable } from '@angular/core';
        import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

        import { SearchModalComponent } from './search-modal.component';


        @Injectable()
        export class XModalService {
            constructor(private modalService: NgbModal) {}

            **openSearchModal() {**
                return this.modalService.open(SearchModalComponent, 
          {backdrop: 'static'}).result;
            }
        }

在这里，我尝试使用 Xmodalservice 中的 opensearchModal() 方法打开模态实例，并将 typescript 文件中的布尔值设置为 true。但我什至没有看到页面。它抱怨 No provider for NgBActiveModal！

请告诉我如何将布尔值传递给我打开的模态实例？

Answer 1

我尝试了与 ngbModal 类似的方法，但无法让它工作（我对 Angular 很陌生，所以也许它会工作，但我不知道如何工作）。最终对我来说效果很好的是使用ngrx/store 和ngrx/effects。

在哑视图组件中设置模态内容，将要在模态中使用的布尔数据作为输入从模态智能容器组件传递。

设置一个 Effect 以响应页面中的按钮单击，该按钮调用一个 reducer 函数来更新您的状态，该状态是您的模态可见性的布尔值。

在您的模态内容组件中，从您的状态中选择您的模态可见性，将您的 ChangeDetectionStrategy 设置为 onPush，然后在您的模板中，您只需要一个 *ngIf 语句来测试模态可见性布尔值。

Answer 2

查看this example on the official ng Bootstrap docs:

import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

看代码最后两条语句：可以保存ModalService.open()返回的modalRef，然后使用modalRef.componentInstance访问@Input()s。