कोणीय 4: रूट नेविगेशन

Question

के बाद jQuery और कोणीय 2-भौतिकता काम नहीं कर रहा है कोणीय-क्ली के साथ एक कोणीय 4 प्रोजेक्ट बनाया है। कोणीय-cli.json फ़ाइल में आयातित सीएसएस और जेएस।

"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 आयात 'angular2-अमल में लाना' से {MaterializeModule};

स्लाइडर अपेक्षा के अनुसार काम करता है जब हम पहली बार पृष्ठ पर उतरते हैं या जब हम रीफ्रेश करते हैं।

समस्या: जब हम राउटर-लिंक का उपयोग करके नेविगेट करते हैं तो पृष्ठ सही ढंग से नेविगेट करता है लेकिन जावास्क्रिप्ट फ़ंक्शंस को कॉल नहीं किया जा रहा है।

मुख पृष्ठ से मार्ग <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(); 
    } 

} 

` त्रुटि: हो रही त्रुटि: त्रुटि लेखन त्रुटि: a.addEventListener एक समारोह

नहीं है

at http://localhost:4200/vendor.bundle.js:15611:765 
at Array.forEach (native) 

Answer 1

बहुत सारे पुनरावृत्ति के बाद इसे हल किया गया। समाधान: यदि आप कोणीय-cli.json में जेएस आयात कर रहे हैं तो घटकों में फिर से आयात करने की आवश्यकता नहीं है। डुप्लिकेशन में परिणाम और आपको अजीब जावास्क्रिप्ट अपवाद मिलेगा जो गुमराह हो जाएंगे। बस उन्हें घोषित करें और इसे नीचे दिए गए कोड की तरह उपयोग करें।

अतिरिक्त रूप से ऑनिंगिंट() {} विधि में जावास्क्रिप्ट फ़ंक्शन को एक बार फिर कॉल करें। इसे प्रत्येक घटक में बुलाया जाना चाहिए इस समारोह का उपयोग किया जाएगा। नीचे उदाहरण:

ngOnInit() { 
     $(function(){ 
      $('.button-collapse').sideNav(); 
     }); // end of document ready 
    } 

दस्तावेज़ तैयार की जाँच करने के लिए याद रखें। जांच की जांच स्क्रिप्ट के प्रारंभिक निष्पादन में हुई।