angular - 在 Angular 4 应用程序中初始化第 3 方库

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. 有没有办法做到这一点？

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"
        });
      }

    }