Angular + ng-bootstrap - 模态:window 打不开
Angular + ng-bootstrap - Modal : window does not open
我是 Angular 的新手,在尝试使用 ng-bootstrap 模态的简单示例时遇到问题。
我刚刚尝试打开 window,但它出现在我的应用程序中。
我想打开一个新的 window,如 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">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</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}`;
}
}
}
我没有显示任何错误,它只是在我的应用程序中打开模式而不是新的 window,我真的不明白为什么。
编辑:
这是我的问题的屏幕:
Problem
我有按钮 "launch demo modal",当我点击它时 "modal title" "one fine body..." 出现在按钮下方,而不是模态
如 ng-bootstrap NgbModal "A service to open modal windows" 中所述,它没有在新浏览器 window 中打开模态 window 的属性。
我创建了与您相同的应用程序:
- angular 4.1.0-beta.0
- bootstrap 4.0.0-alpha.6
- ng-bootstrap 1.0.0-alpha.22
模态 windows 按预期工作,这是我的应用程序的内容
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(我用的是BootstrapCDN)
<!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">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</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>
//1。模态组件必须在 entryComponents 中注册(角度 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);
}
我在使用 https://github.com/ankosoftware/ng2-bootstrap-modal#readme 时遇到问题,所以我将问题解决为 angular 8
我是 Angular 的新手,在尝试使用 ng-bootstrap 模态的简单示例时遇到问题。 我刚刚尝试打开 window,但它出现在我的应用程序中。 我想打开一个新的 window,如 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">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</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}`;
}
}
}
我没有显示任何错误,它只是在我的应用程序中打开模式而不是新的 window,我真的不明白为什么。
编辑: 这是我的问题的屏幕: Problem
我有按钮 "launch demo modal",当我点击它时 "modal title" "one fine body..." 出现在按钮下方,而不是模态
如 ng-bootstrap NgbModal "A service to open modal windows" 中所述,它没有在新浏览器 window 中打开模态 window 的属性。
我创建了与您相同的应用程序:
- angular 4.1.0-beta.0
- bootstrap 4.0.0-alpha.6
- ng-bootstrap 1.0.0-alpha.22
模态 windows 按预期工作,这是我的应用程序的内容
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(我用的是BootstrapCDN)
<!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">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</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>
//1。模态组件必须在 entryComponents 中注册(角度 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);
}
我在使用 https://github.com/ankosoftware/ng2-bootstrap-modal#readme 时遇到问题,所以我将问题解决为 angular 8