Question

我有一个父组件和一个按钮。单击按钮会打开一个带有hasBackdrop：false的弹出对话框，因此当用户点击模态外部时，模态仍保持打开状态。在这个弹出窗口中，我还有另一个按钮，然后单击此按钮打开另一个带有hasBackdrop：false属性的模态。两者都很好。但是当我点击第二个按钮时，它会关闭第一个模态。

屏幕截图示例：documented

当我点击添加客户按钮时，我正在打开新客户弹出窗口。当我单击保存按钮如果表单无效我打开另一个模态但第一个模态正在关闭。

这是代码：

<button md-dialog-close="Cancel" class="btn btn-warning btn-md" (click)="cancel()">Cancel</button>

  cancel()
  {
    alert('test');
    return true; // prevent any event bubbling
  }

更新

我也尝试过只有一个模态弹出窗口，我只是在取消按钮点击时发出警告，它仍然关闭了模态。

<span *ngIf="showLoader" class="loading">loading...</span>
<div>
  <h1 md-dialog-title>New Customer</h1>
  <div md-dialog-content>
    <form [formGroup]="AddCustomerForm" novalidate (ngSubmit)="createCustomer(AddCustomerForm)">
      <fieldset>
        <legend></legend>
        <br/>
        <div class="col-lg-12">
          <div class="form-group">
            <label for="Firstname" class="col-lg-3 control-label">First Name</label>
            <div class="col-lg-8">
              <input id="Firstname" name="Firstname" formControlName="Firstname" required type="text" class="validate filter-input form-control">
            </div>
          </div>
          <div class="form-group">
            <label for="Lastname" class="col-lg-3 control-label">Last Name</label>
            <div class="col-lg-8">
              <input id="Lastname" name="Lastname" formControlName="Lastname" required type="text" class="validate filter-input form-control">
            </div>
          </div>
          <div class="form-group">
            <label for="Email" class="col-lg-3 control-label">Email</label>
            <div class="col-lg-8">
              <input mdInput formControlName="Email" email
              class="validate filter-input form-control">
            </div>
          </div>          
          <div class="form-group">
            <label for="Username" class="col-lg-3 control-label">Username</label>
            <div class="col-lg-8">
              <input id="Username" name="Username" formControlName="Username" required type="text" class="validate filter-input form-control">
            </div>
          </div>
          <div class="form-group">
            <label for="Password" class="col-lg-3 control-label">Password</label>
            <div class="col-lg-8">
              <input id="Password" name="Password" formControlName="Password" required type="text" class="validate filter-input form-control">
            </div>
          </div>
          <div class="form-group">
            <label for="Address" class="col-lg-3 control-label">Address</label>
            <div class="col-lg-8">
              <input id="Address" name="Address" formControlName="Address" required type="text" class="validate filter-input form-control">
            </div>
          </div>
          <div class="form-group">
            <label for="Postcode" class="col-lg-3 control-label">Postcode</label>
            <div class="col-lg-8">
              <input id="Postcode" name="Postcode" formControlName="Postcode" required type="text" class="validate filter-input form-control">
            </div>
          </div>          
          <div class="form-group">
            <label for="City" class="col-lg-3 control-label">City</label>
            <div class="col-lg-8">
              <input id="City" name="City" formControlName="City" required type="text" class="validate filter-input form-control">
            </div>
          </div>
          <div class="form-group">
            <label for="Picture" class="col-lg-3 control-label">Picture</label>
            <div class="col-lg-8">
              <input type="file" (change)="uploadFileChange($event)" placeholder="Upload file" 
              id="Picture" name="Picture" formControlName="Picture"
              class="validate filter-input form-control"
              accept=".gif,.png,.jpg,.jpeg">
            </div>
          </div>
          <div class="form-group">
            <label for="Country" class="col-lg-3 control-label">Country</label>
            <div class="col-lg-8">
              <select id="Country" name="Country" formControlName="Country" required class="validate filter-input form-control">
                  <option *ngFor="let country of countries" value= {{country.CountryID}}>
                      {{country.CountryName}}
                  </option>
              </select>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <div md-dialog-actions align="center">
    <div class="content">
      <div class="row">
        <br/>
            <button md-dialog-close="Save" type="button" (click)="createCustomer(AddCustomerForm)" class="btn btn-success btn-md">Save</button>
            <button md-dialog-close="Cancel" type="button" class="btn btn-warning btn-md" (click)="cancel()">Cancel</button>
      </div>
    </div>
  </div>
</div>

这可能是一个MdDialog错误。

更新2：完整版HTML代码

import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JRootPane;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.plaf.ColorUIResource;
import javax.swing.plaf.metal.DefaultMetalTheme;
import javax.swing.plaf.metal.MetalLookAndFeel;

public class MyLookAndFeel {
  JFrame frame;
  JMenuBar menubar;
  MetalLookAndFeel metal;
  JMenu menu;

  public MyLookAndFeel() {
    metal = new MetalLookAndFeel();
    metal.setCurrentTheme(new MetalTheme());
    try {
      UIManager.setLookAndFeel(metal);
    }
    catch(UnsupportedLookAndFeelException e) {
      e.printStackTrace();
    }
    frame = new JFrame("Hello");

    frame.setUndecorated(true);
    frame.getRootPane().setWindowDecorationStyle(JRootPane.FRAME);

    menubar = new JMenuBar();
    menubar.setOpaque(true);
    menubar.setBackground(Color.green);

    menu = new JMenu("File");
    menubar.add(menu);
    frame.setJMenuBar(menubar);

    frame.setVisible(true);
    frame.setSize(100,100);

  }
  public class MetalTheme extends DefaultMetalTheme {

    @Override
    public ColorUIResource getMenuBackground() {
      return new ColorUIResource(Color.GREEN);
    }
    public ColorUIResource getWindowTitleBackground() {
        return new ColorUIResource(java.awt.Color.green);
    }
  }
  public static void main(String args[]) {
    new MyLookAndFeel();
  }
}

角度材料2 MdDialog hasBackdrop不适用于子弹出窗口

0 个答案: