Question

我要使用2个ngx-smart-modals在应用程序中添加一些功能。第一个包含一个表单，然后单击“添加”按钮，将打开一个新模式，其中包含该表单中最近添加的数据。像这样的东西：

（模式“ Beh”是弹出的第二个模式，“ beh”目前只是一个伪文本，并且位置也需要更改，因此请暂时忽略它：））

我遇到的问题是，当我单击“添加”时，模态“贝”会在后台禁用该表单，但我希望仍启用它以添加更多数据。

是否有任何属性或方法可以帮助我实现这一目标？是否可以禁用表单顶部的不可见层？

我的代码：

详细信息组件（“ beh”之一）：

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>

detailcomponent模板：

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

Answer 1

这是模态的默认行为和预期行为。

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

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.

您的要求不是创建第二个模态，而是

如果只想在第二个弹出窗口中显示一些文本或图像，请使用吐司消息
如果您想将第二个表单都添加到同一个模式中。
如果您还想让我知道。

在不禁用背景的情况下打开ngx-smart-modal？

1 个答案: