How To pass let-c=“close” of modal template to other component's html angular 5

问题

I'm new to angular 4 and please help me with this. I have one component having modal template.

Component :-

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

Html :-

<ng-template #content let-c="close" let-d="dismiss">
    <app-partial-modal-content></app-partial-modal-content>
</ng-template>

My other component PartialModalContentComponent

import { Component, OnInit } from '@angular/core';

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-partial-modal-content',
  templateUrl: './partial-modal-content.component.html',
  styleUrls: ['./partial-modal-content.component.css']
})
export class PartialCloneModalComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

and partial-modal-content.component.html is

<div class="modal-header">
  <h4 class="modal-title">Modal title</h4>
  <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>

But when I'm closing this modal it shows console error saying d and c is not a function. I want to pass template's let-c="close" let-d="dismiss" to other component. How I can achieve this??

回答1:

You could declare a @Input() in your PartialModalContentComponent class.

import { Component, OnInit, Input } from '@angular/core';

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-partial-modal-content',
  templateUrl: './partial-modal-content.component.html',
  styleUrls: ['./partial-modal-content.component.css']
})
export class PartialCloneModalComponent implements OnInit {
@Input() cValue;
@Input() dValue;


 constructor() { }

  ngOnInit() {
  }

}

and then when you are inserting it in your html:

<ng-template #content let-c="close" let-d="dismiss">
    <app-partial-modal-content [cValue] = "this.c"></app-partial-modal-content>
</ng-template>

Now you can do things with cValue in your tsfile and your html file in your PartialModalContentComponent.

回答2:

I think you need to define a "handlerClose" function in your partial-modal-content typescript file. This function should be called from the onClick of the dismiss button with the text "Cross click" and also from the close button in the footer with the text 'Close click'. After that you have to emit the text to the output field "close" and in your other component "ngbd-modal-basic" define the output (close) that call other function to display the specific text returned. See example below

// partial-modal-content.component.html 
<div class="modal-header">
  <h4 class="modal-title">Modal title</h4>
  <button type="button" class="close" aria-label="Close" (click)="handlerClose('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="handlerClose('Close click')">Close</button>
</div>

//partial-modal-content.component.ts
@Component({
  selector: 'app-partial-modal-content',
  templateUrl: './partial-modal-content.component.html',
  styleUrls: ['./partial-modal-content.component.css']
})
export class PartialCloneModalComponent implements OnInit {
  @Output() close = new EventEmitter();
  constructor() { }
  ngOnInit() {  }

  handlerClose(template){
    this.close.emit(template);
  }
}

// ngbd-modal-basic
<ngbd-modal-basic(close)="handleClose($event)"></ngbd-modal-basic>

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
    closeResult: string;

    handleClose(e){
        this.closeResult = e;
    }
}

来源：https://stackoverflow.com/questions/48536807/how-to-pass-let-c-close-of-modal-template-to-other-components-html-angular-5

标签

angular

typescript

angular-cli

ng-bootstrap