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

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

模态内容模板需要基于布尔参数显示/隐藏某些字段

“我的页面”组件有一个按钮，单击该按钮需要打开带有布尔参数的modalInstance

这是我的

page.component.html

search-modal.component.ts

在这里，我尝试使用Xmodalservice中的opensearchModal方法打开model实例，并在typescript文件中将布尔值设置为true。但是我甚至没有看到那一页。它抱怨没有提供NgBActiveModal

---

请让我知道如何将布尔值传递给我打开的模态实例？

我尝试了与ngbModal类似的方法，但无法使其工作。我对Angular非常陌生，所以可能它会工作，但我不知道如何工作。最终对我来说效果很好的是使用和

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

设置一个效果，以对页面中的按钮单击做出反应，该按钮单击调用一个reducer函数来更新状态的一部分，该状态是模式可见性的布尔值

---

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

我尝试了与ngbModal类似的方法，但无法使其工作我对Angular非常陌生，所以也许它会起作用，我只是不知道怎么做。最终对我来说效果很好的是使用和

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

设置一个效果，以对页面中的按钮单击做出反应，该按钮单击调用一个reducer函数来更新状态的一部分，该状态是模式可见性的布尔值

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

签出：

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

签出：

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

使用标记使用标记

 <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>**

 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
            }]
   };

  }
 }

    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();
                }
            }


        }

  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() {}

            }

        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;
            }
        }

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