位置：用于角度2的粘性polyfill

Question

角度2位置是否有任何填充料：粘性。我已经找到了一些，但是其中大多数是基于jquery的，似乎没有可用于angular 2的实现：

https://github.com/wilddeer/stickyfill

我需要知道角度2的示例用法

对于Javascript，如下所示：

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

Answer 1

我将其添加为angular 1.4和npm包“ stickyfilljs”上的指令：“ ^ 2.0.3”

import { Directive, ElementRef } from '@angular/core';
import * as Stickyfill from 'stickyfilljs';


@Directive({
  selector: '[StickyPolyFill]'
})
export class StickyPolyFillDirective {

  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    Stickyfill.addOne(this.elementRef.nativeElement);
  }
}

在组件中，我有：

<div class="top-bar-container stickyMenu" StickyPolyFill>

别忘了在CSS中添加粘性：

  .stickyMenu {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;       
  }

Answer 2

它与角无关。您正在寻找的是一个 Polyfill 来处理浏览器中未实现的内容，它不直接与 jQuery 或 Angular 链接，它仅链接到您的浏览器。

您链接的那个很好，只需将其添加到您的构建过程或资产数组（如果您使用的是 Angular-CLI）。

您只需将变量声明为任何元素即可使用它，并将其添加到其中一个 ts 文件的开头：

    declare var Stickyfill: any;