Angular NgModal 打开但无法点击任何输入或按钮

Question

问题： 我在一个组件内有一个按钮，它可以打开另一个组件作为模式。该按钮有效，它打开了模式，除了我不能点击任何东西，无论是输入还是交叉。我已经将该组件作为 entryComponent 插入到 App 模块中：

entryComponents: [NeworderComponent]

调用模态的组件 window .html

<button type="button" class="btn btn-success text-center" (click)="openew(rank?.productId)">Order</button>

调用modal的组件window.ts

  import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

    export class TopproductsComponent implements OnInit {

  constructor(private orderservice: OrderService,
    private productService: ProductService,
    private activatedRoute: ActivatedRoute,
    private modalService: NgbModal,
    private router: Router) { }

    openew(id) {
        const modalRef = this.modalService.open(NeworderComponent, {size:"lg"});
        modalRef.componentInstance.title = 'neworder';
      }
}

模态组件 .html

<div class="modal-dialog modal-lg">
        <div class="modal-header">
          <h4 class="modal-title">New Order</h4>
            <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="mt-3">
                <form #new="ngForm" class="mt-3 text-center" id="form" (ngSubmit)="onSubmit(new)">
                    <div class="text-center">
                      <div class="form-group">
                        <label for="prod_edit">Product</label>
                          <select class="form-control" [(ngModel)]="product" [ngModelOptions]="{standalone: true}">
                            <option *ngFor="let product of products" value="{{ product?.id }}" >{{ product?.name }}</option>
                          </select>
                      </div>  
                        <div class="form-group">
                            <label for="exampleFormControlInput1">Quantity</label>
                            <input type="text" name="quantity" class="form-control text-center mt-2" [(ngModel)]="quantity" [ngModelOptions]="{standalone: true}">
                        </div>
                    </div>
                        <button type="submit" class="btn btn-success w-50 mt-2">Submit</button>
                  </form>
            </div>
          </div>
    </div>

模态组件.ts

import { Component, OnInit, Input} from '@angular/core';
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-neworder',
  templateUrl: './neworder.component.html',
  styleUrls: ['./neworder.component.css']
})


export class NeworderComponent implements OnInit {
  @Input() title = `Information`;


  constructor(private orderservice: OrderService,
    private productService: ProductService,
    public activeModal: NgbActiveModal) { }

  ngOnInit() {
    this.productService.getProducts().subscribe(products => {
      this.products = products;
      console.log(this.products);
    });
  }


}

Answer 1

你需要删除 class modal-dialog modal-lg 在主要的 div 组件中（即使你可以删除 div)

<div> <!--it's NOT <div class="modal-dialog modal-lg"> -->
 <div class="modal-header">
  ....
  </div>
  <div class="modal-body">
  ...
  </div>
<div>

Angular NgModal 打开但无法点击任何输入或按钮

Angular NgModal opens but can't click in any input or button

modal-dialog

typescript

ng-modal

angular