将数据发送到模态并返回到 Angular/Bootstrap 中的组件答案

【问题标题】：Send data to a modal and back to the component in Angular/Bootstrap将数据发送到模态并返回到 Angular/Bootstrap 中的组件
【发布时间】：2023-03-07 22:28:02
【问题描述】：

我有一个用户列表，我想使用模式编辑用户的详细信息。如何将数据从组件的用户列表传递到模态，然后在组件代码中获取这些详细信息（以便调用 API）？

这是组件代码：

export class DeviceUsersInternalComponent implements OnInit {   
    @Input() summary: any;
    users: UserDetails[];

    updateCredentials() {
    }
}

这里是html：

<div class="col-lg-6 col-md-6 col-sm-6" *ngIf="summary">
    <div class="panel panel-default panel-primary">
        <div class="panel-heading">
            <div class="thead">USERS</div>
        </div>
        <div class="panel-body table-responsive">
            <p *ngIf="!users">No Users</p>
            <table class="table table-striped table-condensed table-borderless table-responsive" *ngIf="users">
                <tbody>
                    <tr *ngFor="let us of users">
                        <td>
                            <a class="btn btn-md btn-primary" 
                               data-toggle="modal" 
                               data-target="#changeCredentialsModal">{{ us.operatorId }}</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="changeCredentialsModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <div class="thead">Change details for {{ us.name }}</div>
            </div>
            <div class="modal-body">
                <form (ngSubmit)="onSubmit()" #changeCredentialsForm="ngForm">
                    <div class="form-group">
                        <table class="table table-condensed table-borderless">
                            <tr>
                                <td class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    <label>Name: </label>
                                    <input type="text" class="form-control" ng-model="user.name"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">Close</button>
                <button class="btn btn-success" data-dismiss="modal" (click)="updateDetails()">Submit</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

是否尝试过使用角度服务？您可以在打开模式弹出窗口之前将数据设置到服务中，并在模式打开后读取相同的数据。
@Code-EZ 好主意，我试试看。
如果您想根据新的服务数据对组件进行更改检测，请在您的组件上创建一个 getter setter 属性。 get users():UserDetails[]{ return this.service.UserDetails; }.something like this
您可以将 ng-bootstrap 用于模态；它有一个 ModalService，您可以使用它来将数据从父级传递到 Modal 并从 code 动态打开模态。然后你可以在你的模式中使用 EventEmitter 从服务中返回数据。

标签： angular twitter-bootstrap typescript webpack angular6

【解决方案1】：

我通常使用 angular-material 和它们的对话框用于此类应用程序。

https://material.angular.io/components/dialog/overview

它真的很容易使用。您基本上为您创建了一个模态组件，使用服务打开它，并且很容易与它共享数据：在服务方面：

dialog.open(DialogComponent, {
   sharedDatas: 'test'
}

在对话框组件方面：

constructor(@Inject(MAT_DIALOG_DATA) public sharedData: any)

【讨论】：

【解决方案2】：

一种方法是使用 Angular 服务共享数据。

设置模态组件打开前要读取的数据

service.UserDetails=["Setting some data"];

modal.open() //code for open the popup

当你关闭弹窗时，如果你想让角度变化检测基于新的服务数据工作，你可以在组件中创建一个getter/setter属性来与新的服务数据同步。

model.close()// when model close you can update the service property

service.UserDetails= ["Updated the data"];

在组件中，您可以执行以下操作。所以你不需要显式调用变更检测。Angular 会自动为你做这件事

export class DeviceUsersInternalComponent implements OnInit {   
    @Input() summary: any;
    get users():UserDetails[]{ return this.service.UserDetails; }

    updateCredentials() {
    }
}

或者您可以使用RxJS Subjects 或 EventEmitter 将数据从模态发送回组件并更新组件属性。

【讨论】：