Как я могу открыть модал в angular 7 без нажатия кнопки, - PullRequest
Новая
       47

Как я могу открыть модал в angular 7 без нажатия кнопки,

1 голос
/ 21 марта 2020

Как открыть модал в angular 7 без нажатия кнопки. Мне нужно открыть модальный, когда я получаю ответ от одного из API без использования кнопки. я новичок в angular. Мой HTML: 

<ng-template #Qpaper let-c="close" let-d="dismiss">        
<div class="modal-header text-white" >
  <div class="modal-title " id="modal-basic-title" >
    <h4>Draft  Selected Question</h4>
  </div>
  <button type="button" class="close text-white" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body  p-0">
   <p>q paper preview </p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="d('Cross click')">Cancel</button>
</div>

Я пробовал складывать коды для запуска модального события: 

this.modalService.open('Qpaper');
this.modalService.open(data.response , Qpaper)

Ответы [ 3 ]

0 голосов
/ 21 марта 2020

Вам нужно использовать View Child и получить ссылку из шаблона. 

@ViewChild('Qpaper') private qpaper;

Не забудьте импортировать ViewChild. 

import { ViewChild } from '@angular/core';

наконец, вы можете просто сделать это 

this.modalService.open(qpaper);
0 голосов
/ 21 марта 2020

Вы можете обернуть модал в его собственный компонент.

my-modal.component.ts 

import { Component, OnInit, Input } from '@angular/core';

import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
  styleUrls: ['./my-modal.component.css']
})
export class MyModalComponent implements OnInit {
  @Input() response: any;

  constructor() { }

  ngOnInit() {
  }
}

my-modal.component. html

<div class="modal-header text-white" >
  <div class="modal-title " id="modal-basic-title" >
    <h4>Draft  Selected Question</h4>
  </div>    
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body  p-0">
   <p>q paper preview </p>
   <p class="card-text">ID: {{ response.id }}</p>
   <p class="card-text">Title: {{ response.title }}</p>
   <p class="card-text">Value: {{ response.value }}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="activeModal.close('Close click')">Cancel</button>
</div>

Затем он может быть импортирован в родительский компонент и открыт в соответствии с требованием. В вашем случае допустимый ответ на запрос API.

Родительский компонент 

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { MyModalComponent } from './my-modal/my-modal.component';

export class AppComponent implements OnInit {
  constructor(private modalService: NgbModal) { }

  ngOnInit() {
    this._apiService.getDetails().subscribe(
      response => {
        this.openMyModal(response);
      },
      error => {
        console.error('Unable to retrieve data from API: ', e);
      }
    );
  }

  openMyModal(response: any) {
    const modalRef = this.modalService.open(MyModalComponent);
    modalRef.componentInstance.response = response;
  }
}

Затем вызовите функцию openMyModal(), когда получите действительный ответ от запроса API.

Одним из преимуществ этого подхода, как и с любым другим компонентом, является то, что он позволяет открывать столько модалов, сколько вам нужно в родительском компоненте.

0 голосов
/ 21 марта 2020

вы можете увидеть этот пример https://stackblitz.com/edit/angular-modal-service?file=app%2Fapp.component.ts

Затем позвоните onCreateModal() в AppComponent без нажатия кнопки, вы можете открыть модальный

...