在前端开发中，灯箱是一个非常常见的组件，用于展示一个大图或者一组图片。在这篇文章中，我们将会使用 Angular Material 创建一个全屏的灯箱组件，并且提供一些深度的学习和指导意义。
Angular Material 简介
Angular Material 是一个 Angular 的 UI 组件库，它提供了一些常用的 UI 组件，比如按钮、输入框、菜单等等。使用 Angular Material 可以极大地提高开发效率，并且保证了应用程序的一致性。
创建灯箱组件
首先，我们需要安装 Angular Material 和 Angular CDK：
npm install --save @angular/material @angular/cdk
然后，我们需要在 app.module.ts 中导入和配置这些模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
------ - ---------------- - ---- ----------------------------
------ - --------------- - ---- -------------------------
------ - ------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
----------------
--------------
--------------
-----------------
-----------------
----------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接下来，我们需要创建一个 lightbox 组件。这个组件包含两个部分：一个用于展示图片的 img 元素和一个用于关闭灯箱的按钮。
<ng-template #lightboxTemplate let-imageUrl>
<div class="lightbox-container">
<img [src]="imageUrl" alt="lightbox image">
<button mat-icon-button (click)="close()">
<mat-icon>close</mat-icon>
</button>
</div>
</ng-template>我们使用 ng-template 定义了一个名为 lightboxTemplate 的模板，并且使用 let-imageUrl 定义了一个变量 imageUrl，它将会作为图片的地址传入模板中。
在模板中，我们使用 img 元素展示图片，并且使用 button 元素创建了一个关闭灯箱的按钮。我们还使用了 Angular Material 中的 mat-icon-button 和 mat-icon 来创建一个带有图标的按钮。
最后，我们需要在组件中实现打开和关闭灯箱的逻辑。
-- -------------------- ---- -------
------ - ---------- ---------- ----------- - ---- ----------------
------ - -------- ---------- - ---- -----------------------
------ - -------------- - ---- ----------------------
------------
--------- -----------
--------- -
------- ----------------- ----------------------------------------------------------- -----------------
-
--
------ ----- ------------ -
------------------------------ ------------------ -----------------
------- ------------ -----------
------------------- -------- -------- --
-------------- ------- -
-------------
--------------- - ---------------------
----------------- -------------------------------------------------------------------------
------------ -----
-------------- -------------------
---
----- -------------- - --- ------------------------------------- ----- -
---------- --------
---
---------------------------------------
-
------- -
-- ----------------- -
--------------------------
--------------- - -----
-
-
-我们在组件中定义了一个 open 方法，它接受一个图片的地址作为参数。在这个方法中，我们首先调用了 close 方法，以确保灯箱已经关闭。
然后，我们使用 Overlay 和 OverlayRef 创建了一个全屏的灯箱。我们使用 positionStrategy 定义了灯箱的位置，使用 hasBackdrop 和 backdropClass 定义了灯箱的背景和样式。
最后，我们使用 TemplatePortal 将模板实例化，并且将图片的地址作为模板的上下文传入。然后，我们使用 OverlayRef 的 attach 方法将模板附加到灯箱中。
结论
在这篇文章中，我们学习了如何使用 Angular Material 创建一个全屏的灯箱组件。我们了解了 Angular Material 的一些基础知识，并且学习了如何使用 Overlay 和 OverlayRef 创建全屏的灯箱。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742e6f699516187acdb6595