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">&times;</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=""