typescript - Hur man skickar let-c="close" från modalens mall till en annan komponents HTML i Angular 5

Jag är ny på Angular 4 och snälla hjälp mig med detta. Jag har en komponent som har en modal mall.

Komponent :-

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>

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

}

och partial-modal-content.component.html är

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

Men när jag stänger denna modal visas ett konsolfel som säger att d och c inte är en funktion. Jag vill skicka mallens let-c="close" let-d="dismiss" till en annan komponent. Hur kan jag uppnå detta??

Svar #1

Du kan deklarera en @Input() i din PartialModalContentComponent-klass.

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

}

och sedan när du infogar det i din HTML:

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

Nu kan du göra saker med cValue i din ts-fil och din html-fil i din PartialModalContentComponent.

Svar #2

Jag tror att du behöver definiera en "handlerClose"-funktion i din partial-modal-content TypeScript-fil. Denna funktion bör anropas från onClick på avvisningsknappen med texten "Cross click" och även från stängningsknappen i sidfoten med texten 'Close click'. Därefter måste du sända texten till utdatafältet "close" och i din andra komponent "ngbd-modal-basic" definiera utdata (close) som anropar en annan funktion för att visa den specifika texten som returneras. Se exempel nedan

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

Relaterade artiklar