Отправлять данные модальным и обратно компоненту в Angular / Bootstrap

Question

У меня есть список с пользователями, и я хочу редактировать данные о пользователе, используя модальное.Как я могу передать данные из списка пользователей компонента в модальный режим, а затем вернуть эти данные обратно в код компонента (чтобы вызывался 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>

Answer 1

Я обычно использую angular-material и их диалоги для этого типа приложения.

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

Это действительно удобно.Вы в основном создаете для себя модальный компонент, открываете его с помощью службы, и с ним легко обмениваться данными: на стороне службы:

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

на стороне компонента диалога:

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

Answer 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 для отправки данных из модального режима.к компоненту и обновите свойство компонента.