将数据从自定义模态传递到组件中的 html 表 - 角度

Question

我写了一个自定义模态，如下所示...
modal.component.ts：

import { Component } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
closeResult: string;
constructor(private modalService: NgbModal) { }
open(content: any) {
this.modalService.open(content, { size: 'lg' }).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}`;
}
}
}  

modal.component.html：

<div class="row">
<div class="col-sm-12">
<button class="btn btn-primary mb-4" (click)="open(content)">Add new user</button>
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Add new user</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">
<form ngsubmit="saveUserDetails(items)" name="userDetailsForm">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputName3" placeholder="Name" ngModel="name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" ngModel="email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">Role</div>
<div class="col-sm-9">
<div class="">
<select class="browser-default custom-select">
<option selected>Administrator</option>
<option value="1">User</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="c('Ok click')">Ok</button>
<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</ng-template>
</div>
</div>  

然后我在我的作曲中调用它，如下所示：

<div class="row">
<div class="col-md-12 col-lg-12">
<div class="col-lg-12-col-md-12">
<!-- <button class="btn btn-primary mb-4 posBtn" data-toggle="modal" data-target="#myModal">Add new user</button> -->
<app-modal class=""></app-modal>
<!-- <jw-modal>Add new user</jw-modal> -->
</div>
<div class="card">
<!-- Default panel contents -->
<div class="card-header"><b>User Management</b></div>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>  

现在我想将模态中的表单数据传递给组件中的表。如何将操作侦听器添加到模式中的Ok按钮以完成此操作？

Answer 1

要向模态添加数据：

const modalRef = this.modalService.open(ConfirmModalComponent);
modalRef.componentInstance.data = data;

在模态组件中，我使用@Input：

@Input() data:any = null;

Answer 2

这就像在触发事件时将数据从子组件传递到父组件，您可以使用如下所示@output：

Parent.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}

child.component.ts(在你的例子中，它的modal.component.ts(

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hola Mundo!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}