Angular 5 希望从 ngx-bootstrap 模态到组件获取价值

Question

我想从ngx-bootstrap模态获取一个值到父组件（从那里调用/打开模态）。场景是，单击父组件中的超链接将打开一个模态。当我单击模态中的提交按钮时，数据将传递给父组件。

在父组件.ts文件中，我编写了以下内容：

this.bsModalRef = this.modalService.show(DeliveryaddressotpModalComponent, {});

在模态.html文件中，

<button name="btnGo" class="btn btn-secondary btn-block" type="button" (click)="submitForm()">Go</button>

在模式.ts文件中：

submitForm(){
  console.log("submit button in modal clicked");
  this.clicked = true;
}

我的问题是：如何在父组件中获取this.clicked的值？

以下是整个父组件：

import { Component, OnInit, NgZone, HostListener } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { RegistrationService } from '../../services/registration.service';
import { AddressbookModalComponent } from '../../shared/components/addressbook-modal/addressbook-modal.component';
import { Router } from '@angular/router';
@Component({
    selector: 'app-addressbook',
    templateUrl: './addressbook.component.html',
    styleUrls: ['./addressbook.component.scss']
})
export class AddressbookComponent implements OnInit {
isMediumScreen: boolean;
    sidebar: boolean;
    isCollapsed: boolean;
    bsModalRef: BsModalRef;
    userShippingAddress : Array<object>;
    userAddress = new UserAddress();
    addressId : any = '';
    phcode : any;
    altphcode : any;
    constructor(
        private ngZone: NgZone,
        private modalService: BsModalService,
        private auth: RegistrationService,
        private content: ContentService,
        public toastr : ToastrService,
        public spinner : NgxSpinnerService,
        public router: Router,
    ) { }
modifyAddress(addressId,type){
if(data.results[0].isDefaultShipping == 1){
    this.auth.sendOtpForModifyShippingAddress(data.results[0].userId).subscribe((data:any) =>{
        this.spinner.hide();
        this.bsModalRef = this.modalService.show(DeliveryaddressotpModalComponent, {});
        this.bsModalRef.content.closeBtnName = 'Close';
    });
}
}

以下是模态代码：

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { NgForm }   from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { RegistrationService } from '../../../services/registration.service';
import { ContentService } from '../../../services/content.service';
@Component({
	selector: 'app-deliveryaddressotp-modal',
	templateUrl: './deliveryaddressotp-modal.component.html',
	styleUrls: ['./deliveryaddressotp-modal.component.scss']
})
export class DeliveryaddressotpModalComponent implements OnInit {
	userId : number;
	otp:any;
	constructor(
		public regService : RegistrationService,
		public bsModalRef: BsModalRef,
		public toastr : ToastrService,
		private content: ContentService,
		) {
			this.userId = this.regService.item.user.id;
		}
	ngOnInit() {
	}
	onSubmit(){
	}
	submitForm(){
		console.log("submit opt");
	}
}

Answer 1

您可以在共享服务中创建public modalCLicked : BehaviorSubject<boolean> = new BehaviorSubject(false)，并将其注入到模式服务和父组件中。 然后在提交表单中调用它。喜欢这个：

submitForm(){
  console.log("submit button in modal clicked");
  this.clicked = true;
this.modalCLicked.next(this.clicked);
}

在您的父组件中，像这样访问它：

this.modalCLicked .asObservable().subscribe(val => console.log("modal clicke", val);):
// do whatever you what it in subscribe()

Answer 2

你需要订阅 ngx-bootstrap-modal 提供的 onHide 方法：

// in your compoenent.ts 
//import these  
import { ChangeDetectorRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
// constructor 
 constructor(
              ..........
        private modalService: BsModalService,
        private changeDetection: ChangeDetectorRef,
          ........
        
    ) {
    }
 modifyAddress(addressId,type){
if(data.results[0].isDefaultShipping == 1){
    this.auth.sendOtpForModifyShippingAddress(data.results[0].userId).subscribe((data:any) =>{
        this.spinner.hide();
        this.bsModalRef = this.modalService.show(DeliveryaddressotpModalComponent, {});
        this.bsModalRef.content.closeBtnName = 'Close';
        this.subscribeData();
        }
        }
 
 // subscribe onhide 
 subscribeData(){
   Observable.combineLatest(
            this.modalService.onHide
        ).subscribe(() => this.changeDetection.markForCheck());
        
         this.modalService.onHide.subscribe(() => {
           let value =  this.bsModalRef.content.clicked; // will contain cliked value 
             console.log('cliked status ',value);
        });
    }
 }
 
 /// in your modal 
 
 import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { NgForm }   from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { RegistrationService } from '../../../services/registration.service';
import { ContentService } from '../../../services/content.service';
@Component({
	selector: 'app-deliveryaddressotp-modal',
	templateUrl: './deliveryaddressotp-modal.component.html',
	styleUrls: ['./deliveryaddressotp-modal.component.scss']
})
export class DeliveryaddressotpModalComponent implements OnInit {
	userId : number;
	otp:any;
  clicked;
	constructor(
		public regService : RegistrationService,
		public bsModalRef: BsModalRef,
		public toastr : ToastrService,
		private content: ContentService,
		) {
			this.userId = this.regService.item.user.id;
		}
	ngOnInit() {
	}
	onSubmit(){
	}
// here
	submitForm(){
		console.log("submit button in modal clicked");
    this.clicked = true;
    this.bsModalRef.hide();  // willl hide the modal
	}
 
 
 
 
 

 <!-- in modal.html  -->
<button name="btnGo" class="btn btn-secondary btn-block" type="button" (click)="submitForm()">Go</button>

请注意，隐藏方法会被调用多次。如果您只想在隐藏回调中获取一个值，则需要添加其他条件。

友情链接 ： https://valor-software.com/ngx-bootstrap/#/modals#directive-events