如何解决Angular 9 :: NgbModal 在加载时导航
我在 Angular 9 项目中加载两个模式(openMoDaledit 和 openModalDetail 方法)时遇到问题。当我打开它时,它会自动导航到根路由。
我在同一个组件中有一个模态的另一个实例(openModalCreate 方法),显然两者都是相同的,只改变了几个参数,如模态标题,但第一个导航,另一个保持不变在模态中。
你会在导航移动到根路由之前看到模态出现,并且模态组件的 OnInit 方法没有任何代码,因此模态组件没有任何可以引发导航的功能任何一点。
我的引导程序安装版本是“@ng-bootstrap/ng-bootstrap”:“^6.0.3”。
有谁知道如何在 NgbModal 负载上阻止导航?
代码隐藏:
emitIconButtonClick (action,i,content) {
switch (action) {
case 'edit':
this.openMoDaledit(i);
break;
case 'delete':
this.onDeleteRow(i);
break;
case 'detail':
this.openModalDetail(i,content);
break;
default:
break;
}
}
openModalCreate () {
this._formsService.editing = false;
const modalRef = this.modalService.open(DynamicModalComponent,{
size: 'lg',});
modalRef.componentInstance.title = 'Nuevo ' + this.config.label;
modalRef.componentInstance.fields = this.config.fields;
modalRef.componentInstance.close.subscribe(() => {
modalRef.close();
});
modalRef.componentInstance.save.subscribe((event) => {
this._formsService.setSavedStatusForm(false);
this.rows.push(event);
this.bindToForm();
modalRef.close();
});
}
openMoDaledit (index: number) {
const modalRef = this.modalService.open(DynamicModalComponent,});
modalRef.componentInstance.title = 'Editar ' + this.config.label;
modalRef.componentInstance.fields = this.config.fields;
modalRef.componentInstance.data = this.rows[index];
modalRef.componentInstance.close.subscribe(() => {
modalRef.close();
});
modalRef.componentInstance.save.subscribe((event) => {
this.rows[index] = event;
this._formsService.setSavedStatusForm(false);
this.bindToForm();
modalRef.close();
});
}
openModalDetail (i: number,content: any) {
this.detailArray = [];
Object.entries(this.rows[i]).forEach((e) => {
const entry = {
name: e[0],value: e[1],};
this.detailArray.push(entry);
});
this.modalService.open(content).result.then(
(result) => { debugger },(reason) => { debugger }
);
}
HTML
<div class="form-group dynamic-group field" [formGroup]="group">
<div class="add-btn">
<app-button (click)="openModalCreate()" clasesBtn="btn-primary" icono="plus-circle"> </app-button>
</div>
<div [attr.id]="config.name" [attr.name]="config.name" class="master-table">
<table class="table table-striped">
<thead>
<tr>
<th *ngFor="let header of config.fields" scope="col">
{{ (header.header ? header.header : header.name) | translate }}
</th>
<th *ngIf="config.actions">
{{ 'actions' | translate }}
</th>
</tr>
</thead>
<tbody [ngSwitch]="true">
<tr *ngFor="let row of rows; index as i">
<td *ngFor="let header of config.fields">
<div class="ellipsis max-width-cell">
{{ showDataTable(row[header?.name],header.name) }}
</div>
</td>
<td *ngIf="config.actions">
<div class="table-body_row_actions">
<a *ngFor="let action of config.actions" href="" (click)="emitIconButtonClick(action.name,content)" [ngClass]="{
'table-body_row_actions-container': true,delete: action.name === 'delete'
}">
<i-feather name="{{ action.icon }}" class="feather-icon"></i-feather>
</a>
</div>
</td>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title">
{{ 'detail' | translate }}
</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body custom-modal-body">
<div class="flex-container">
<div class="dataCell" *ngFor="let field of detailArray">
<div class="header">
{{ field.name | translate }}
</div>
<div class="data">
{{ showDataTable(field.value,field.name) }}
</div>
</div>
</div>
</div>
</ng-template>
</tr>
</tbody>
</table>
</div>
</div>
解决方法
由@zainhassan 解决
--> 从标签中删除 href=""
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。