打开ngx-智能模式，而不禁用背景？

Question

我有两个ngx-smart-modals，用于在我的应用程序中添加一些特性。第一个包含一个表单，单击“添加”按钮，打开一个新的模式，其中包含最近从表单中添加的数据。就像这样：

​

(模式"Beh“是弹出的第二个模式，"beh”目前只是一个虚拟文本，而且位置也需要更改，所以请暂时忽略它:)

我遇到的问题是，当我单击"Add“时，模式"Beh”在后台禁用表单，但我希望仍然启用它来添加更多数据。

是否有任何财产或方法可以帮助我实现这一点？在表单顶部禁用不可见层的东西？

我的代码：

详细组件( "beh“1)

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxSmartModalComponent } from 'ngx-smart-modal';

@Component({
  selector: 'app-detail-modal',
  templateUrl: './detail-modal.component.html',
  styleUrls: ['./detail-modal.component.scss']
})
export class DetailModalComponent implements OnInit {

  @ViewChild('detailModal') public detailModal: NgxSmartModalComponent;

  constructor() { }

  ngOnInit() {
    this.detailModal.dismissable = false;
    this.detailModal.backdrop = false;
    this.detailModal.escapable = false;
    this.detailModal.isVisible();
  }

  resetData() {
   // this.detailModal.setData(window.localStorage['feature']);
  }

}

创建模式(表单)

import { Component, OnInit, ViewChild, ViewContainerRef, AfterContentInit } from '@angular/core';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { DynamicTextFieldService } from 'src/app/services/dynamic-loading/dynamic-text-field/dynamic-text-field.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DynamicDropdownService } from 'src/app/services/dynamic-loading/dynamic-dropdown/dynamic-dropdown.service';
import { featureMeta, platform } from 'src/app/components/modals/create-feature-modal/featureMeta';
import { DynamicTextAreaService } from 'src/app/services/dynamic-loading/dynamic-text-area/dynamic-text-area.service';
import { NgxSmartModalComponent, NgxSmartModalService } from 'ngx-smart-modal';

@Component({
  selector: 'app-create-feature-modal',
  templateUrl: './create-feature-modal.component.html',
  styleUrls: ['./create-feature-modal.component.scss']
})

/**
* This class creates a featureModal component
*/
export class CreateFeatureModalComponent implements OnInit, AfterContentInit {

  /*constructor and other methods*/

  /**
  * initialize buildForm
  */
  ngOnInit() {
    this.buildForm();
  }


  /**
  * Add data (this is the opening function for the modal)
  */
  addData() {
    this.ngxsmartmodal.getModal('detailModal').open();
  }

表单模板

<app-detail-modal></app-detail-modal>
<ngx-smart-modal #featureModal [identifier]="'featureModal'">
  <h2 Align="center">{{"views[modal][feature][heading]" | translate }}</h2>
  <form [formGroup]="featureForm">
    <div #name class='feature'></div>
    <div #type class='feature'></div>
    <div #platform class='feature'></div>
    <div #detail class='feature'></div>
    <app-button description="{{ 'views[modal][feature][button][submit]' | translate }}" class="btn btn-primary btn-md submit" (callFunction)="setData()"></app-button>
    <app-button description="{{ 'views[modal][feature][button][add]' | translate }}" class="btn btn-primary btn-md submit" (callFunction)="addData()"></app-button>
    <app-button description="{{ 'views[modal][feature][button][cancel]' | translate }}" class="btn btn-danger btn-md cancel" (callFunction)="featureModal.close()"></app-button>
  </form>
</ngx-smart-modal>

用于细节组件的模板

<ngx-smart-modal #detailModal [identifier]="'detailModal'" (onOpen)="resetData()">
  <div *ngIf="detailModal.hasData()">
    <h3>Beh</h3>
  </div>
</ngx-smart-modal>

Answer 1

这是modals的默认行为和预期行为。

请参阅模态窗口用户界面的定义

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application.

您的要求不是创建第二种模式，而是

1. 如果您只想在第二个弹出窗口上显示一些文本或图像，请使用Toast消息
2. 如果您想要添加第二格式，则两者位于相同的模式上。
3. 如果你想要别的事告诉我。