angular - Angular 6 弹出窗口

问题描述

正在处理 Angular 6 中的弹出窗口。目前正在关注此链接 https://stackblitz.com/angular/brrobnxnooox?file=app%2Fmodal-basic.html

html代码

<div class="form-group">
  <ng-template #ea_popup let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">PopUp</h4>
      <button type="button" class="close" aria-labelledby="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="dateOfBirth">Date of birth</label>
          <div class="input-group">
            <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>

  <span></span>
  <button type="submit" class="btn btn-success" (click)="onClick(ea_popup)">Add</button>
</div>

组件代码

import { Component, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { Provider } from '../provider';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
    selector: 'app-providerservice',
    templateUrl: './providerservice.component.html',
    styleUrls: ['./providerservice.component.css']
})
export class ProviderserviceComponent implements OnInit {
    constructor(private modalService: NgbModal, public cdRef: ChangeDetectorRef) { }
     closeResult: string;


    ngOnInit() {

    }


    onClic(content) {
         this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).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}`;
    }
  }
}

当我在stackblitz中创建一个具有相同代码的项目时，它工作正常。当我在我的项目中实现时，在调试时它在控制台中显示错误

标签： angularangular6

最后我得到了这个问题的解决方案。在 index.html 文件中更新了我的引导 css。现在它工作正常

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">


 to
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

angular - Angular 6 弹出窗口

问题描述

解决方案

推荐阅读