Angular4:jQuery和angular2-materialize在路由导航后不起作用
发布时间:2020-12-17 10:18:17 所属栏目:安全 来源:网络整理
导读:用angular-cli创建了一个角度4项目.在angular-cli.json文件中导入css和js. "styles": [ "../node_modules/materialize-css/dist/css/materialize.css","styles.css"],"scripts": [ "../node_modules/jquery/dist/jquery.js","../node_modules/hammerjs/hamme
用angular-cli创建了一个角度4项目.在angular-cli.json文件中导入css和js.
"styles": [ "../node_modules/materialize-css/dist/css/materialize.css","styles.css" ],"scripts": [ "../node_modules/jquery/dist/jquery.js","../node_modules/hammerjs/hammer.js","../node_modules/materialize-css/dist/js/materialize.js","../src/assets/js/init.js" ], init.js具有以下功能 (function($) { $(function() { $('.slider').slider(); $('.button-collapse').sideNav(); $('.carousel').carousel(); // $('.carousel.carousel-slider').carousel({fullWidth: true}); $('.carousel').carousel({ dist: 0,shift: 0,padding: 20,}); }); // end of document ready })(jQuery); 在app.module.ts中导入MaterializeModule 当我们第一次登陆页面或刷新时,滑块按预期工作. 问题:当我们使用router-link导航时,页面导航正确但javascript函数没有被调用. 从主页路由< a routerLink =“/ blog / abc-1”> Blog< / a> 我试过:`blog.component.ts import { Component,OnInit } from '@angular/core'; import { MaterializeModule } from 'angular2-materialize'; import * as $from 'jquery'; import * as Materialize from 'materialize-css'; declare let Materialize : any; @Component({ selector: 'app-blog',templateUrl: './blog.component.html',styleUrls: ['./blog.component.css'] }) export class BlogComponent implements OnInit { constructor() { } ngOnInit() { Materialize('.slider').slider(); } } ` at http://localhost:4200/vendor.bundle.js:15611:765 at Array.forEach (native)
经过大量迭代后解决了这个问题.
解: 如果要在angular-cli.json中导入js,则无需再在组件中导入相同的内容.重复的结果,你会得到奇怪的javascript异常,这将导致误导. 只需声明它们并像下面的代码一样使用它. declare let $: any; 另外在Onngint(){}方法中再次调用javascript函数.必须在将使用此功能的每个组件中调用此方法. ngOnInit() { $(function(){ $('.button-collapse').sideNav(); }); // end of document ready } 记得检查文件准备好了.不检查导致脚本的早期执行. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Bootstrap_02_流动网格布局
- ionic 自定义指令无法获取绑定值,ngModelController.$view
- 在Scala中,我如何告诉抽象基类类型参数T是否支持从Int(或Fl
- twitter-bootstrap – 使toastr警报看起来像引导警报
- 抓虫记之四:超时的真相
- angular – div的边框绑定到routerlink指令?
- SHELL训练营--day15_shell练习26-30
- twitter-bootstrap-3 – Bootstrap DatePicker setDate方法
- webservice axis2框架下的发布
- 在anglejs中使用angular.bind是什么?在哪里使用?