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

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

我的其他组件 Partial Modal ContentComponent

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

}

和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)="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" 传递给其他组件。我怎样才能实现这个目标？

您可以在 PartialModalContentComponent 类中声明 @Input() 。

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 和 Partial Modal ContentComponent 中的 html 文件执行操作。