如何将模态模板的 let-c="close" 传递给其他组件的 html angular 5

Question

我是 angular 4 的新手，请帮我解决这个问题。我有一个具有模态模板的组件。

分量 :-

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>

我的另一个组件 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() {
  }

}

和部分模态-content.component.html 是

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

但是当我关闭这个模式时，它显示控制台错误，说 d 和 c 不是一个函数。我想将模板的 let-c="close" let-d="dismiss" 传递给其他组件。我怎样才能做到这一点？？

Answer 1

您可以在 PartialModalContentComponent 中声明一个 @Input() 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() {
  }

}

然后当你将它插入你的 html:

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

现在您可以在 tsfile 中使用 cValue 并在 PartialModalContentComponent 中使用 html 文件。

Answer 2

我认为您需要在部分模态内容打字稿文件中定义一个 "handlerClose" 函数。应从带有文本 "Cross click" 的关闭按钮的 onClick 以及带有文本 'Close click' 的页脚中的关闭按钮调用此函数。之后，您必须将文本发送到输出字段 "close" 并在您的其他组件 "ngbd-modal-basic" 中定义调用其他函数以显示返回的特定文本的输出（关闭）。请参阅下面的示例

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

如何将模态模板的 let-c="close" 传递给其他组件的 html angular 5

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

typescript

angular-cli

ng-bootstrap

angular