在前端开发中我们通常使用许多工具和库来加速我们的开发进程，其中 npm 包 @4geit/ngx-footer-component 就是一个可供使用的组件库，它为我们提供了现成的底部组件，简化了底部的开发工作。本文将带领您学习 @4geit/ngx-footer-component 的使用，包括安装、引入、基本使用和进阶用法。
安装
在使用 @4geit/ngx-footer-component 之前，需要先确保您已经安装了 Node.js 以及 npm 包管理器。安装好 Node.js 和 npm 之后，就可以使用以下命令安装 @4geit/ngx-footer-component：
npm install @4geit/ngx-footer-component
引入
安装好之后，我们在项目中的需要使用该组件的模块中引入该组件：
import { NgxFooterComponent } from '@4geit/ngx-footer-component';基本用法
使用组件
@4geit/ngx-footer-component 提供的组件非常简单，在引入之后就可以直接使用，例如：
<footer> <ngx-footer></ngx-footer> </footer>
直接在 <footer> 中添加 <ngx-footer> 标签即可使用该组件。
参数配置
@4geit/ngx-footer-component 支持配置一些参数。下面是可用参数的列表：
// 链接 @Input() links: any[] = []; // 版权信息 @Input() copyrights: // 声明信息 @Input() declaration: string;
例如，我们可以通过以下方式设置链接：
<footer>
<ngx-footer [links]="[
{ name: 'Home', href: '/' },
{ name: 'Privacy Policy', href: '/privacy' }
]"></ngx-footer>
</footer>样式自定义
@4geit/ngx-footer-component 所提供的组件是带有一定样式的，但是根据不同的项目需求，我们可能需要对其进行样式自定义。可以通过以下方式实现：
-- -------------------- ---- ------- ------- - -- --- ----------------- ----- -- -- ------- ------ -- -- -------- ----- ---------------- ------- ------------ ------- -
然后在组件使用时添加 class 名，如：
<footer> <ngx-footer class="footer"></ngx-footer> </footer>
进阶用法
如果您已经熟悉了 @4geit/ngx-footer-component 的基本用法，那么您也可以从进阶用法中获取更多灵感。
使用 FontAwesome 图标
@4geit/ngx-footer-component 默认使用的图标为 Unicode 字符实现的，若需使用 FontAwesome 图标，需要安装 @fortawesome/fontawesome-free 包。
安装 @fortawesome/fontawesome-free
通过下面命令安装 @fortawesome/fontawesome-free：
npm install @fortawesome/fontawesome-free
引入 @fortawesome/fontawesome-free
使用 Font Awesome 图标时，需要在 app.module.ts 中引入以下模块：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------------------
------ - -------- - ---- -------------------------------------
-----------
-------- -
-- ---
-----------------
--
-- ---
--
------ ----- --------- -
-------------------- -------------- -
-- - ------ --------
---------------------------
-
-使用 Font Awesome 图标
添加 FontAwesome 图标到项目中非常简单，只需在 links 数组中添加一个 icon 属性即可：
<footer>
<ngx-footer [links]="[
{ name: 'GitHub', href: 'https://github.com/4geit', icon: ['fab', 'github'] }
]"></ngx-footer>
</footer>使用 i18n 多语言
@4geit/ngx-footer-component 支持多语言切换，只需使用 Angular 自带的 i18n 功能即可。
添加 i18n 支持
对于支持 i18n 的组件，在使用前需要先在模板上添加 i18n 指令：
<footer i18n> <ngx-footer></ngx-footer> </footer>
然后在对应的 *.xlf 文件中添加对 ngx-footer-component 的翻译即可。
多语言切换
使用 Angular 自带的 translate 管道即可实现多语言切换：
<footer i18n>
<ngx-footer [links]="[
{ name: 'Home', href: '/' }
]"></ngx-footer>
<p>{{ 'copyright' | translate }}</p>
</footer>示例代码
以上是 @4geit/ngx-footer-component 的基本用法和进阶用法，下面请参考以下示例代码：
-- -------------------- ---- -------
--------
----------- ----------
- ----- ------- ----- --- --
- ----- -------- -------- ----- ---------- -
----------------
---------
------- ---------------
----------- ----------
- ----- --------- ----- --------------------------- ----- ------- --------- -
----------------
---------
------- -----
----------- ----------
- ----- ------- ----- --- -
----------------
----- ----------- - --------- ------
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1181e8991b448daa63