如何在angular中创建弹出窗口

我需要帮助

我正在创建一个带有角度和放大弹出窗口的画廊，但它一点也不好用

当我进入html路径时，我需要刷新搜索引擎，使其工作，否则它将无法工作

我不明白问题是什么

谢谢

这是我的服务

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

@Injectable({
  providedIn: 'root'
})
export class AgustinNietoService {

  private agustinNieto: AgustinNieto [] = [

{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00001.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00002.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00003.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00004.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00005.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00006.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00007.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00008.jpg' },
{ img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00036.jpg' }

  ];

  constructor() {
console.log('Estamos trabajando;');
  }
  getAgustinNieto() {
    return this.agustinNieto;
  }
}

export interface AgustinNieto {
  img: string;
}

Este es el HTML

<div id="modal-magic" class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <div class="gallery" *ngFor="let agustinNieto of agustinNieto">
            <a class="view" href="{{ agustinNieto.img }}"><img class="animated fadeIn" id="img-all-hzt" src="{{ agustinNieto.img }}" alt=""></a>
        </div>
    </div>
</div>    

}))

这是一个组件

import { Component, OnInit} from '@angular/core';
import { AgustinNietoService, AgustinNieto } from '../../../../services/agustin-nieto.service';


@Component({
  selector: 'app-all-view-agustin-nieto',
  templateUrl: './all-view-agustin-nieto.component.html',
  styleUrls: ['./all-view-agustin-nieto.component.css']
})
export class AllViewAgustinNietoComponent implements OnInit {

agustinNieto: AgustinNieto[] = [];

  constructor( private _agustinNietoService: AgustinNietoService ) {

  }

 ngOnInit() {

 this.agustinNieto = this._agustinNietoService.getAgustinNieto();

 console.log( this.agustinNieto);
 }

}

---

如果能多了解一点“It works”的含义，那将是非常有用的

• 放大弹出窗口是否正确启动，但图像加载缓慢？刷新页面后，图像会立即加载吗
• 放大弹出窗口是否正确启动，但图像根本没有加载？刷新页面后，图像会立即加载吗
• 你的放大弹出窗口根本没有启动吗？那么，这个宏伟的建筑就出现了 刷新页面后立即启动

---

请插入代码而不是图像，因为其他用户更容易帮助您。更多详细信息将对其他人有所帮助。我认为help@kboul非常感谢我认为help@nkuma_12非常感谢缩略图图像启动正确，但当我在另一个选项卡中单击打开照片并返回放大弹出窗口时正确地就好像需要刷新才能加载jquery。但是我的js文件是正确的，因为控制台中有print console.log。

import { Component, OnInit} from '@angular/core';
import { AgustinNietoService, AgustinNieto } from '../../../../services/agustin-nieto.service';


@Component({
  selector: 'app-all-view-agustin-nieto',
  templateUrl: './all-view-agustin-nieto.component.html',
  styleUrls: ['./all-view-agustin-nieto.component.css']
})
export class AllViewAgustinNietoComponent implements OnInit {

agustinNieto: AgustinNieto[] = [];

  constructor( private _agustinNietoService: AgustinNietoService ) {

  }

 ngOnInit() {

 this.agustinNieto = this._agustinNietoService.getAgustinNieto();

 console.log( this.agustinNieto);
 }

}