將數據傳遞到父組件角度爲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 
      }] 
    }; 

    } 
} 

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


     } 

搜索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的模式實例。但我甚至沒有看到該頁面。它抱怨沒有NgBActiveModal的提供商！

請讓我知道，以我怎麼能德布爾傳遞給模式實例我打開？

Answer 1

我試着用ngbModal類似的東西，不能讓它的工作（我很新的角度，所以也許它會工作，我只是不知道如何）。結果對我來說工作得很好的是使用ngrx/store和ngrx/effects。

設立一個啞視圖組件的模式內容，與要作爲輸入傳遞從模式智能集裝箱組件的模式中使用布爾數據。

設置的影響作出反應，在你的頁面的按鈕，點擊調用減速功能來更新你的一根狀態的就是你情態可見性的布爾值。

在您的模態內容組件中，從您的狀態中選擇您的模態可見性，將您的ChangeDetectionStrategy設置爲onPush，然後在您的模板中，您只需要一個測試模態可見性布爾值的* ngIf語句。