Angular + ng-bootstrap - 模态框：窗口无法打开

Question

Angular + ng-bootstrap - 模态框：窗口无法打开

5

我刚接触Angular，并在尝试使用ng-bootstrap modal的简单示例时遇到了问题。我只是想打开一个窗口，但它却出现在我的应用程序中。我希望能像ng-bootstrap示例中所解释的那样打开一个新窗口。

我正在使用： - Angular 4.0.0 - Bootstrap 4.0.0-alpha.6 - @ng-bootstrap/ng-bootstrap 1.0.0-alpha.22

我在我的file.html文件中有以下内容:

<template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
            <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>    
        <div class="modal-body">
            <p>One fine body&hellip;</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
        </div>
    </template>

    <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

    <pre>{{closeResult}}</pre>

在我的 file.ts 文件中：

import { Component, Input, Output, EventEmitter, ViewContainerRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModal, NgbActiveModal, NgbModalOptions, NgbModalRef, ModalDismissReasons, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';


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


export class StagiairesComponent {

    closeResult: string;

    constructor(private modalService: NgbModal) { }

    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        }
        else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        }
        else {
            return `with: ${reason}`;
        }
    }
}

我没有看到任何错误提示，只是在我的应用程序中打开了模态框，而不是一个新的窗口，我真的不明白为什么。

编辑：这是我的问题截图：问题截图我有一个名为“启动演示模态框”的按钮，当我点击它时，“模态框标题”“一段很好的正文…”出现在按钮下方，而不是在模态框中。

- UserName

你可以尝试使用https://valor-software.com/ng2-bootstrap/#/modals - Rahul Singh

我尝试过了，但是出现了错误，我认为这是因为 Angular 4 的缘故。当我安装 ng2-bootstrap 时，出现了“UNMET PEER DEPENDENCY”问题。然后我尝试了一下，在导入模块时，我的 app.module.ts 出现了错误，它说“Cannot find name: DropdownModule”（我在尝试这个测试示例：https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/bootstrap4.md）。 - UserName

你能否为此发布一个 Plunker？ - Rahul Singh

这是我第一次在 Plunker 上发布，所以我不确定我是否做对了...但是这就是它：https://plnkr.co/edit/vxZR7m4e3XLwdDuIpu30 - UserName

3个回答

1

//1. 模态组件必须在 entryComponents 中注册（适用于 Angular 8 及其之前版本）

//1. The modal component has to be registered in entryComponents (angualr 8 and prev)

 entryComponents: [
    YourModalComponent
  ],
  providers: [
   ...]

//2. also the model directly inputted in the open:
  openConfirmUpdateModal() {
 this.modalService.open( YourModalComponent);
 }

- Ben

1

当我使用https://github.com/ankosoftware/ng2-bootstrap-modal#readme时遇到了问题，所以我将问题修复到了Angular 8。

https://www.npmjs.com/package/ngm-bootstrap-modal

- Milver Acevedo

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。仅有链接的答案如果链接页面发生更改可能会变得无效。 - Brian61354270

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Artem Bozhko · Accepted Answer

如ng-bootstrap中所述，NgbModal是“打开模态窗口的服务”，但它没有属性可以在新浏览器窗口中打开模态窗口。

我创建了与您相同的应用程序：

angular 4.1.0-beta.0
bootstrap 4.0.0-alpha.6
ng-bootstrap 1.0.0-alpha.22

模态窗口按预期工作，这是我的应用程序内容。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html (I use Bootstrap CDN)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularModal</title>
  <base href="/">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

app.component.ts

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

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

export class AppComponent {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

app.component.html

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{closeResult}}</pre>