Angular 9 :: NgbModal 正在加载导航

Question

我在 Angular 9 项目中加载两个模式（openModalEdit 和 openModalDetail 方法）时遇到问题。当我打开它时，它会自动导航到根路由。

我在同一组件中有另一个模态实例（openModalCreate 方法），显然两者是相同的，只改变了模态标题等几个参数，但第一个导航，另一个停留在模式中。

您会看到模式出现在导航移动到根路由之前，并且模式组件的 OnInit 方法没有任何代码，因此模式组件没有任何可以引发任意点导航。

我的bootstrap安装版本是"@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, {
            size: 'lg',
        });
        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, i, 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>

Answer 1

@zainhassan 已解决

--> 从标签中删除 href=""

Angular 9 :: NgbModal 正在加载导航

Angular 9 :: NgbModal is navigating on load

javascript

modal-dialog

ng-bootstrap

angular

ng-bootstrap-modal