Question

我的目标是在按下按钮时以角度打开模态。我决定使用ng-bootstrap。我去了他们的网站并决定将默认模态代码复制粘贴到我的应用程序中。

按钮显示，当我点击它时，屏幕移动了一点，但没有模态可见。当我第二次点击按钮时，我会收到反馈点击背景时被解雇。控制台告诉我没有错误。

有谁知道如何解决这个问题？

网页的图片

主页HTML文件：ng-template是模式

<div class="col-md-8 col-md-offset-2">
<h5>Welcome to MovieMeter! <span *ngIf="isLoggedIn"> You are logged in as {{fullName}}</span></h5>
    <br>

    <ng-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-outline-dark" (click)="c('Close click')">Close</button>
        </div>
    </ng-template>

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

    <hr>

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

        <h3>Trailers:</h3>
        <hr>
        <ul>
            <li *ngFor="let trailer of trailers">
                <img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope">
                <div class="trailerTitle"><h5>{{trailer.movie.title}}</h5></div>
            </li>
        </ul>
    <app-cinema-featured></app-cinema-featured>

</div>

Home.component.ts

import {Component, OnInit} from "@angular/core";
import {AuthService} from "../auth/auth.service";
import {MovieService} from "../movie/movie.service";
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    styleUrls: ['./home.component.css'],
    selector: 'app-home',
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

    isLoggedIn:Boolean;
    fullName;
    trailers;
    closeResult: string;


    constructor(private modalService:NgbModal, private authService: AuthService, private movieService: MovieService){}

    ngOnInit(){
        if (localStorage.getItem('token') !== null || undefined){
            this.isLoggedIn = true;
            this.fullName = localStorage.getItem('fullName');
        }
        // get the thumbnails and links of the three most recent movie trailers via the youtube API
        this.movieService.getTrailers()
            .subscribe(trailers => {
                this.trailers = trailers.result;
                console.log(this.trailers);
            })
    }

    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}`;
        }
    }
}

更新：这是我点击按钮后控制台中的元素。 ng背景和ng-modal正在显示，但无法看到。

Answer 1

在尝试了很多事情后，我发现我需要bootstrap 4而不是bootstrap 3。

Answer 2

尝试使用@ViewChild在组件代码中选择模式：

<强> HTML

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

TS

 @ViewChild("content") content: NgbModal;

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

Answer 3

//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);
 }

Ng-bootstrap模态没有显示

3 个答案: