在 Angular 4 应用中初始化第三方库

Question

我正在尝试在我的 Angular 4 应用程序中使用 Scrollify。我应该使用这个脚本来初始化它：

<script>
  $(function() {
    $.scrollify({
      section: ".section-class-name",
      sectionName: "section-name"
    });
  });
</script>

我知道该库依赖于 jquery，我已经在我的 angular-cli.json 文件中声明了它：

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

我只想在一个惰性加载模块中使用 Scrollify，因此我不想像 jquery 那样将它作为全局脚本进行 delcare。有办法吗？

Answer 1

好吧，看来我已经通过反复试验弄明白了:)。

您必须从包含部分元素的组件中初始化插件。

...
@Component({
   template: "<div class='section'></div><div class='section'></div><div class='section'></div>"
})
export class ComponentX implements OnInit,AfterViewInit {

      constructor () {}

      ngAfterViewInit() {
      }

      @ViewChild(SectionComponent) section:ElementRef;

      ngOnInit(): void {
        $.scrollify({
            section : "section"
        });
      }

    }

在 Angular 4 应用中初始化第三方库

Initialzing a 3rd-party Library in an Angular 4 App

angular-cli

jquery-scrollify

angular