npm 包 ng2-affix 使用教程-JavaScript中文网-JavaScript教程资源分享门户

背景

在网页开发中，固定在页面顶部或底部的元素非常常见。如果我们希望一个元素在滚动页面时位置定位在某个固定位置，一般的处理方式是通过CSS设置position:fixed实现。但是，这种方法有些局限，比如在某些情况下我们需要固定元素在一个父元素内部，这时候使用 position:fixed 将不再是最佳选择。

在这种情况下，我们可以使用 ng2-affix 来满足需求。ng2-affix 是一个 Angular2+ 的小型库，它可以让一个元素相对于其父元素固定。在这篇文章中，我们将介绍如何使用ng2-affix。

安装

我们可以使用 npm 安装 ng2-affix。在命令行中输入：

npm install ng2-affix

引入

首先，我们需要在我们的项目中引入 ng2-affix。

在模块中引入

我们将 ng2-affix 引入到模块中。打开 app.module.ts 文件并添加一个 import 语句。

import { AffixModule } from 'ng2-affix';

为了使它能够被指令和组件使用，我们还需要把 AffixModule 添加到我们的 imports 数组中。

-- -------------------- ---- -------
-----------
  -------- -
    --------------
    ------------
    -----------
    -----------
  --
  ------------- - ------------ --
  ----------    - ------------ -
--
------ ----- --------- - -

ng2-affix Directive (指令)

在 Angular2+ 中，我们经常使用 指令 (Directives) 来实现特定的功能。ng2-affix 实现了一个名为 ngAffix 的 指令 (Directive)。在使用时，ng-affix 只需在 HTML 元素上使用即可。

<div ngAffix [affixTop]="80">I will follow my parent</div>

属性

affixTop: 定义了离父元素顶部多少距离时激活滚动固定效果。属性值应该是一个大于或等于0的数字。如果不设置，默认值为0。

事件

affix: 当元素被固定时触发。
affix-top: 当元素回到顶部时触发。

示例代码

下面是一个简单的使用 ng2-affix 的例子。我们需要一个 HTML 页面和一个 Angular2+ 组件。

示例 HTML

-- -------------------- ---- -------
---- ------------------
  ---- ------------
    ---- -----------------
      ---- --------
        ----------------
        -------- ----- ----- --- ----- ----------- ---------- ----- --------- --- ---- ----- -- ---- --------- ------- --- ----- ------- ------ -- ------- --- -- ---- -------- -- ------- ---- ---------- ---------- -------- -------- ---------- ------ ----- ----- -- ---- -------- ------- --- -- ----- --- ---------- ------- -- -- -----------
      ------
    ------
    ---- -----------------
      -------- ------------
    ------
  ------
------

示例组件

添加 ngAffix 指令后，需要在组件中添加一些额外的代码。

-- -------------------- ---- -------
------ - --------- - ---- ----------------

------------
  --------- ---------
  --------- -
    ---- ------------------
      ---- ------------
        ---- -----------------
          ---- --------
            ----------------
            -------- ----- ----- --- ----- ----------- ---------- ----- --------- --- ---- ----- -- ---- --------- ------- --- ----- ------- ------ -- ------- --- -- ---- -------- -- ------- ---- ---------- ---------- -------- -------- ---------- ------ ----- ----- -- ---- -------- ------- --- -- ----- --- ---------- ------- -- -- -----------
          ------
        ------
        ---- -----------------
          -------- ------------
        ------
      ------
    ------
  -
--
------ ----- ------------ -
-

结论

ngAffix 这个指令非常简单实用，既能让我们快速解决页面布局中的固定元素问题，又非常易于使用。在我们对于 ng2-affix 有了更深入的了解后，相信使用起来会更加得心应手。

参考文献

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005578281e8991b448d4826

npm 包 ng2-affix 使用教程

背景

安装

引入