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

问题描述：

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

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

您是否尝试将''添加到此组件的模板文件中？ –

我没有。这是不错的做法吗？ – Sammy

我诚实地不知道这种做法的任何缺点。并且只有在您将其添加到模板html中的组件中才有它。 –

答

好吧，它似乎我已经通过试验和错误计算出来:)。

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

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

    }

另外，您可能需要在'@types/jquery/index.d中添加一个'scrollify'定义。 ts'文件，类似'scrollify（obj：any）：void;'否则你可能无法在AOT模式下编译它。 – Alexus

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

相关推荐