Question

我正在用角度6编码模态模板，并且一直在关注有关引导程序弹出窗口的教程，但是当我尝试在ngAfterViewInit方法上打开模态时，它不起作用并且永远不会打开。

我正在使用angular 6，并尝试在ts文件中以ViewChild的形式打开模态，但是我不知道为什么它不起作用，目标是运行模态后面的页面，以提供给人们的建议。有人可以帮我吗？

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
      <button type="button" class="close" aria-label="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>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>

import { Component, OnInit, AfterViewInit,ViewChild} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-advertisement-modal',
  templateUrl: './advertisement-modal.component.html',
  styleUrls: ['./advertisement-modal.component.css']
})

export class AdvertisementModalComponent implements OnInit, AfterViewInit {

  closeResult: string;
  @ViewChild('content') myModal;

  constructor(private modalService: NgbModal) {}

  open(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}`;
    }
  }
  ngAfterViewInit(){
    this.myModal.querySelector('content');
    //this.open(null);
  }

  ngOnInit() {
  }

}

我希望稍后打开初始化我的网页的窗口，现在，它什么也没做。

Answer 1

完成！。

我只是更改了ts文件。

import { Component, OnInit, AfterViewInit,ViewChild,ElementRef} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-advertisement-modal',
  templateUrl: './advertisement-modal.component.html',
  styleUrls: ['./advertisement-modal.component.css']
})

export class AdvertisementModalComponent implements OnInit, AfterViewInit {

  closeResult: string;
  @ViewChild('content') myModal: any;

  constructor(private modalService: NgbModal) {}

  open(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}`;
    }
  }
  ngAfterViewInit(){
    this.open(this.myModal);
  }

  ngOnInit() {
  }

}

我希望这可以对其他人有所帮助。再见

如何使用ViewChild在ngAfterViewInit方法上打开模式？

1 个答案: