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

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

javascript angular

Javascript 将数据从自定义模式传递到组件中的html表-角度,javascript,angular,Javascript,Angular,我编写了一个自定义模式，如下所示… modal.component.ts: import { Component } from '@angular/core'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-modal', templateUrl: './modal.component.html', style

我编写了一个自定义模式，如下所示…
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}`;
        }
    }

}

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

modal.component.html:

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

}

<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

按钮以完成此操作

要将数据添加到模式：

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

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

@Input() data:any = null;

这类似于在触发事件时将数据从子组件传递到父组件，您可以使用@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
}
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序父级”，
模板：`
消息：{{Message}}
`,
样式URL:['./parent.component.css']
})
导出类ParentComponent{
构造函数（）{}
消息：字符串；
receiveMessage（$event）{
this.message=$event
}
}

child.component.ts（在您的例子中，它的modal.component.ts）

从'@angular/core'导入{Component，Output，EventEmitter}；
@组成部分({
选择器：“应用程序子项”，
模板：`
发送消息
`,
样式URL:['./child.component.css']
})
导出类子组件{
消息：string=“Hola Mundo！”
@Output（）messageEvent=neweventemitter（）；
构造函数（）{}
sendMessage（）{
this.messageEvent.emit（this.message）
}
}

这可能会对您有所帮助