我有一个用户表，想按ID编辑用户。我面临的问题是，要编辑用户，我需要路由到正在运行的其他编辑组件。但是我想要的结果是，当我按下编辑按钮时，编辑组件应该像模式弹出一样弹出！
我的用户组件：
<div>
<button
class="btn btn-primary btn-md pull-right"
style="height: 34px;margin-bottom: 10px; border: none; margin-right: 10px; background-color: #20A8D8"
data-toggle="modal" data-target="#myModal2">Create User</button>
<div class="example-header pull-right">
<i style="padding: 5px; margin-bottom: 10px" class="fa fa-search"></i>
<input (keyup)="applyFilter($event.target.value)" placeholder="Search"
style="margin-bottom: 10px; border: 1px solid grey; border-radius: 5px; height: 35px; width: 300px; padding: 10px;">
</div>
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="getId(row.user.id)"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let emp">{{emp.user.id}}</td>
</ng-container> -->
<ng-container matColumnDef="user.username">
<th style="text-align: center; flex: 0 0 25% !important; min-width: 204px !important;"
mat-header-cell *matHeaderCellDef mat-sort-header>Username</th>
<td id="d1" style="text-align: center; flex: 0 0 25% !important; min-width: 204px !important;"
mat-cell *matCellDef="let emp">{{emp.user.username}}
<button class="pull-right" id="d2" routerLink="updateuser/{{ emp.user.id }}">Preview</button>
</td>
</ng-container>
<ng-container matColumnDef="is_superuser">
<th mat-header-cell *matHeaderCellDef>Is Superuser</th>
<td mat-cell *matCellDef="let emp">{{emp.user.is_superuser}}</td>
</ng-container>
<ng-container matColumnDef="is_staff">
<th mat-header-cell *matHeaderCellDef>Is Staff</th>
<td mat-cell *matCellDef="let emp">{{emp.user.is_staff}}</td>
</ng-container>
<ng-container matColumnDef="is_active">
<th mat-header-cell *matHeaderCellDef>Is Active</th>
<td mat-cell *matCellDef="let emp">{{emp.user.is_active}}</td>
</ng-container>
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef>Phone</th>
<td mat-cell *matCellDef="let emp">{{emp.phone}}</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>Address</th>
<td mat-cell *matCellDef="let emp">{{emp.address}}, {{emp.city}}</td>
</ng-container>
<ng-container matColumnDef="page_access">
<th mat-header-cell *matHeaderCellDef>Page Access</th>
<td mat-cell *matCellDef="let emp">{{emp.role_access.page_access}}</td>
</ng-container>
<ng-container matColumnDef="role_access.role_name">
<th style="text-align: center; flex: 0 0 25% !important; min-width: 154px !important;"
mat-header-cell *matHeaderCellDef mat-sort-header>Role Name</th>
<td style="text-align: center; flex: 0 0 25% !important; min-width: 154px !important;"
mat-cell *matCellDef="let emp">{{emp.role_access.role_name}}</td>
</ng-container>
<!-- <ng-container matColumnDef="updatedelete">
<th mat-header-cell *matHeaderCellDef>Update/Delete</th>
<td mat-cell *matCellDef="let emp">
<a title="Edit" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-edit"></span>
</a>
<button title="Delete" (click)="deleteEmployee(emp.user.id)" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</ng-container> -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[pageIndex]="0"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 15, 20]">
</mat-paginator>
</div>
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-image: linear-gradient(to bottom right, purple, #20A8D8); color: white">
<h4 class="modal-title" id="myModalLabel2"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<br>
<form [formGroup]="myGroup">
<label>Username</label>
<input type="text" class="form-control" required formControlName='username'>
<br>
<label>Password</label>
<input type="text" class="form-control" required formControlName='password'>
<br>
<label>Assign Role</label>
<ng-multiselect-dropdown options="stringData" selected-model="stringModel" [placeholder]="'---Select---'" [data]="dropdownList"
formControlName="role_access" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"></ng-multiselect-dropdown>
</form>
<br>
<button class="btn btn-success" (click)="createUser()">Submit</button>
</div>
</div>
</div>
</div>
我的编辑组件：
<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-sm-offset-3 col-sm-6">
<div *ngIf="user" class="details wrap">
<h3 style="color: black; text-align: center">
Username: {{ user.user.username }}
</h3>
<br>
<label style="color: black">Phone Number</label>
<input type="text" [(ngModel)]="user.phone" class="form-control"
><br>
<br>
<label style="color: black">Address</label>
<input type="text" [(ngModel)]="user.address" class="form-control"
><br>
<br>
<label style="color: black">City</label>
<input type="text" [(ngModel)]="user.city" class="form-control"
><br>
<br>
<label>Assign Role</label>
<ng-multiselect-dropdown [data]="dropdownList"
[(ngModel)]="user.role_access.role_name" [settings]="dropdownSettings"
(onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
<br>
<br>
<button class="btn btn-success"(click)="onSubmit()">Submit</button>
<br>
</div>
</div>