Angular : 10분 만에 각도 프로젝트에 라이트박스를 추가하는 방법은 무엇입니까?

데모 -


1단계 - 라이트박스 설치
터미널을 열고 아래 명령을 실행하십시오.

npm install --save ngx-lightbox

2단계 - angular.json 업데이트

{ "styles": ["./node_modules/ngx-lightbox/lightbox.css", ...],}

3단계 - 라이트박스 모듈을 app.module.ts에 추가

import { LightboxModule } from 'ngx-lightbox'; @NgModule({ imports: [LightboxModule]})

선택한 구성 요소에서 다음 단계를 수행할 수 있지만 app.component.html에서 라이트박스를 만들어야 한다고 가정합니다.

4단계 - 구성 요소의 html에 마크업 추가
app.component.html

<div *ngFor="let image of _albums; let i=index"> <img [src]="image.thumb" (click)="open(i)" /></div>

5단계 - 구성 요소의 ts 파일에 라이트박스 코드를 추가합니다.
app.component.ts

import { Lightbox } from 'ngx-lightbox'; 

export class AppComponent { 
private _album: Array = []; 

constructor(private _lightbox: Lightbox) {
 for (let i = 1; i <= 4; i++) {
 const src = 'demo/img/image' + i + '.jpg'; const caption = 'Image ' + i + ' caption here'; 
 const thumb = 'demo/img/image' + i + '-thumb.jpg'; 
 const album = { src: src, caption: caption, thumb: thumb }; 
this._albums.push(album); 
} 
} 

open(index: number): void { // open lightbox 
this._lightbox.open(this._albums, index); 
} 

close(): void { // close lightbox programmatically 
this._lightbox.close(); 
}} 

모든 것을 말하면서 계속 배우는 것이 좋습니다!

이 기사를 읽어 주셔서 감사합니다. 와 에서 언제든지 저와 연결해 주세요.