ส่งข้อมูลไปยังโมดอลและกลับมายังคอมโพเนนต์ใน Angular/Bootstrap

ฉันมีรายการผู้ใช้และฉันต้องการแก้ไขรายละเอียดของผู้ใช้ โดยใช้โมดอล ฉันจะส่งข้อมูลจากรายการผู้ใช้ในคอมโพเนนต์ไปยังโมดอลได้อย่างไร และจากนั้นจะดึงรายละเอียดเหล่านั้นกลับมาในโค้ดคอมโพเนนต์ได้อย่างไร (เพื่อให้เรียกใช้งาน 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>

คำตอบ #1

วิธีหนึ่งคือการแชร์ข้อมูลโดยใช้บริการของ Angular

ตั้งค่าข้อมูลให้ถูกอ่านจากคอมโพเนนต์โมดัลก่อนที่มันจะเปิด

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

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

เมื่อคุณปิดป๊อปอัป หากคุณต้องการให้การตรวจจับการเปลี่ยนแปลงของ Angular ทำงานตามข้อมูลบริการใหม่ คุณสามารถสร้าง property แบบ 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 เพื่อส่งข้อมูลกลับมาจากโมดัลไปยังคอมโพเนนต์และอัปเดตคุณสมบัติของคอมโพเนนต์ได้

คำตอบ #2

ฉันมักจะใช้ angular-material และไดอะล็อกของพวกเขาสำหรับแอปพลิเคชันประเภทนี้

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

มันใช้งานง่ายมาก คุณเพียงแค่สร้างคอมโพเนนต์สำหรับโมดอลของคุณ เปิดมันโดยใช้เซอร์วิส และสามารถแชร์ข้อมูลกับมันได้ง่ายๆ: ฝั่งเซอร์วิส:

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

ในส่วนของคอมโพเนนต์ไดอะล็อก:

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