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

时间:2017-05-26 11:09:57

标签: angular angular-cli jquery-scrollify

我正在尝试在我的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。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:0)

好吧,似乎我通过反复试验弄明白了:)。

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

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

    }