角 | Bootstrap - 在模态上关闭功能

Question

我一直在研究如何简单地关闭单击图像后弹出的模式。 我正在使用带角度的引导程序。

                    <img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' />
                <div id="myModal" class="modal fade" >
                        <div class=" modal-lg center">
                            <div class="modal-header">
                                <button type="button" #closebutton class="close" data-dismiss="modal">&times;</button>
                                    <div class="modal-content">
                                            <div class="modal-body">
                                                    <img id="1"src="assets/barrel.jpg" class="img-responsive">
                                                    <img id="2"src="assets/car.jpg" class="img-responsive">
                                            </div>
                                    </div>
                            </div>
                        </div>
                </div>

这是我的 html 片段

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgModule } from '@angular/core';

@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.scss']
})
export class PortfolioComponent implements OnInit {
  @ViewChild('closebutton') closebutton;

  constructor(private fb: FormBuilder) { }

  public ngOnInit() {

  }

  public onSave() {
    this.closebutton.nativeElement.click();
  }

}

这是我的组件打字稿

Answer 1

您可以简单地将 ngIf 与可以切换的布尔值一起使用。

JS

isModalShowing: boolean;

toggleModal() {
  this.isModalShowing = !this.isModalShowing;
}

HTML

<div id="myModal" class="modal fade" *ngIf="isModalShowing">
      <div class=" modal-lg center">
      <div class="modal-header">
        <button type="button" class="close" (click)="toggleModal()">&times;</button>
        <div class="modal-content">
          <div class="modal-body">
          <img id="1"src="assets/barrel.jpg" class="img-responsive">
          <img id="2"src="assets/car.jpg" class="img-responsive">
          </div>
          </div>
        </div>
      </div>
    </div>