$ दस्तावेज़ के पहले से बराबर Angular2 ()

Question

सरल प्रश्न, मुझे आशा है।

मैं एक स्क्रिप्ट चलाना चाहता हूं जब Angular2 $ डॉक्यूमेंट के बराबर हो। पहले से ही निकाल दिया गया है। इस लक्ष्य को हासिल करने का सबसे अच्छा तरीका क्या है?

मैंने स्क्रिप्ट को अंत में डालने की कोशिश की है index.html, लेकिन जैसा कि मुझे पता चला है, यह काम नहीं करता है! मैं इसे लेता हूं कि इसे किसी तरह के घटक घोषणा में जाना है?

क्या किसी .jsफ़ाइल से स्क्रिप्ट लोड करना संभव है ?

संपादित करें - कोड:

मैं अपने आवेदन ( फाउंड्री HTML विषय से ) में निम्नलिखित जेएस और सीएसएस प्लग इन मिला है ।

    <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    ...


    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/flexslider.min.js"></script>
    ...
    <script src="js/scripts.js"></script> //This initiates all the plugins

जैसा कि कहा गया है, लिपियों। जे एस पूरी बात 'Instantiates', और इस प्रकार कोणीय तैयार होने के बाद चलाने की आवश्यकता है। script.js

यह काम कर गया:

import {Component, AfterViewInit} from 'angular2/core';

@Component({
  selector: 'home',
  templateUrl: './components/home/home.html'
})
export class HomeCmp implements AfterViewInit {


    ngAfterViewInit() {
       //Copy in all the js code from the script.js. Typescript will complain but it works just fine
    }

Comments

कुछ घंटों के शोध के बाद, मुझे अभी भी वही मुद्दा मिला है। > मॉड्यूल नहीं मिला: त्रुटि: '@ प्रकार / jquery' को हल नहीं कर सकता। मैंने इसे npm स्थापित के साथ स्थापित किया है - save -D @ प्रकार / jquery, तब जब मैं इसे मॉड्यूल में आयात करने का प्रयास करता हूं (इस तथ्य के कारण कि मैं मेरे Component.ts में टूलबॉक्स से एक संदेश मिला कि यह jQuery से $ नहीं जानता है)। यह मेरा पहला संदेश कहता है! मुझे आशा है कि मेरे स्पष्टीकरण सही हैं, इस समुदाय ने मुझे जो भी मदद दी उसके लिए फिर से धन्यवाद! btw: यह मेरा पहला वास्तविक संदेश है इसलिए मुझे एक अच्छा लिखने की उम्मीद है

— एलेक्जेंडर सेसन

Answer 1

आप ngOnInit()अपने एंगुलर रूट कंपोनेंट में किसी घटना को खुद आग लगा सकते हैं और फिर एंगुलर के बाहर इस घटना को सुन सकते हैं।

यह डार्ट कोड है (मैं टाइपस्क्रिप्ट नहीं जानता) लेकिन अनुवाद करने के लिए कठिन नहीं होना चाहिए

@Component(selector: 'app-element')
@View(
    templateUrl: 'app_element.html',
)
class AppElement implements OnInit {
  ElementRef elementRef;
  AppElement(this.elementRef);

  void ngOnInit() {
    DOM.dispatchEvent(elementRef.nativeElement, new CustomEvent('angular-ready'));
  }
}

Comments

बिल्कुल ठीक है। क्या आप संभवतः ऐसे कोड का एक त्वरित उदाहरण प्रदान कर सकते हैं? क्षमा करें, लेकिन ng2 के लिए काफी नया है

— क्रिस

अधिमानतः मैं चाहूंगा कि जब यह होता है तो एक js फ़ाइल लोड करने में सक्षम हो। इस फ़ाइल में मेरे सभी दस्तावेज़ तैयार कोड (एक html टेम्पलेट का उपयोग कर रहा हूँ) से है और js में है, इसलिए मैं इसे सिर्फ कॉपी पेस्ट नहीं कर सकता क्योंकि मैं एनजी 2 इन .ts लिख रहा हूँ

— क्रिस

चेक संदर्भ ngOnInit के लिए।

— बोरिस

@ इसके लिए मुझे बहुत दूर नहीं जाना है मुझे डर है

— क्रिस

फिर आप बस कोड को रन करें ngAfterViewInit() { ... }। किसी घटना को आग लगाने की आवश्यकता नहीं है।

— गुंटर ज़ोचबॉयर

Answer 2

क्रिस से जवाब की नकल:

यह काम कर गया:

import {AfterViewInit} from 'angular2/core';    

export class HomeCmp implements AfterViewInit {    

    ngAfterViewInit() {
       //Copy in all the js code from the script.js. Typescript will complain but it works just fine
    }

Comments

निश्चित नहीं है कि नीचे की ओर क्यों। इसने मेरे लिए काम किया, लेकिन जेएस कोड I को चलाने के लिए और व्यू कंपाइलर के बीच एक दौड़ भी शुरू की। मैंने उपयोग करना समाप्त कर दिया AfterViewChecked, लेकिन सभी समान, यहाँ मुझे सही दिशा में इंगित करने के लिए एक उत्थान है।

— लूकिफर

यह काम कर सकता है लेकिन यह सबसे अच्छा अभ्यास नहीं हो सकता है। क्या बेहतर होगा कि सभी बाहरी कोड कुछ वैश्विक, लेकिन अच्छी तरह से नामांकित फ़ंक्शन में लिपटे हैं, फिर इस फ़ंक्शन को कॉल करें ngAfterViewInit()। जैसे window.MY_APP = {}; MY_APP.init = function () {/*copy all that script.js here*/ }। फिर आपके घटक में, import ...; declare var MY_APP: any; class HomeComponent() { ngAfterViewInit() { MY_APP.init(); } }लेकिन नीचे की रेखा अभी भी है कि आपके पास एक कोणीय 2 ऐप नहीं है - आपका script.js मूल रूप से एक पुराना स्कूल jquery पेज है। आप इसे NG2 घटकों में बदल सकते हैं।

— ज़्लाटको

मैं इसे अस्वीकार नहीं कर रहा हूं लेकिन इस विधि में मैं DOM तत्वों तक पहुंच सकता हूं। हालाँकि जब मैं element.css ('ऊँचाई') प्राप्त करने की कोशिश करता हूँ तो यह मुझे 0px पर वापस आ जाता है, इसलिए मैं इसे css सेट करने के लिए उपयोग नहीं कर सकता।

— ब्लास्ट

यह मेरे लिए पूरी तरह से काम करता है :) मुझे लगता है, इस स्तर पर आपके पास पहले से ही डोम है, लेकिन छवियों की तरह अभी तक लोड किए गए सभी स्रोत नहीं हो सकते हैं। तो यह बिल्कुल वैसा ही है $document.ready()।

— Affilnost

मीठा और चिकना!

— सैम

Answer 3

मैं इस समाधान के साथ गया था इसलिए मुझे jQuery $ .getScript फ़ंक्शन के अलावा घटक के भीतर अपना कस्टम js कोड शामिल करने की आवश्यकता नहीं थी ।

नोट: jQuery पर निर्भरता है। तो आपको jQuery और jQuery टाइपिंग की आवश्यकता होगी।

मैंने पाया है कि यह कस्टम या वेंडर js फ़ाइलों को प्राप्त करने का एक अच्छा तरीका है, जिसमें टाइपिंग उपलब्ध नहीं है जिस तरह से टाइपस्क्रिप्ट आप पर चिल्लाते नहीं हैं जब आप अपना ऐप शुरू करते हैं।

import { Component,AfterViewInit} from '@angular/core'

@Component({
  selector: 'ssContent',
  templateUrl: 'app/content/content.html',
})
export class ContentComponent implements AfterViewInit  {

  ngAfterViewInit(){
    $.getScript('../js/myjsfile.js');
  }
}

अद्यतन वास्तव में मेरे परिदृश्य में OnInit जीवनचक्र घटना ने बेहतर काम किया क्योंकि यह स्क्रिप्ट को लोड होने के बाद लोड होने से रोकता था, जो ngAfterViewInit के साथ था, और यह स्क्रिप्ट लोड करने से पहले गलत तत्व स्थिति दिखाने का कारण बनता है।

ngOnInit() {
    $.getScript('../js/mimity.js');
  }

Comments

मुझे मिलता है Cannot find name '$'.जब मैं इस उदाहरण का पालन करने की कोशिश करता हूं?

— खाना-नींद-कोड

@ खाओ-नींद-कोड मुझे लगता है कि आपको jQuery के टाइपिंग की आवश्यकता है, npm install @types/jquery -Dशॉट देने के बारे में कैसे ? : D

— realappie

Answer 4

Angular के अंदर jQuery का उपयोग करने के लिए केवल $ को निम्नलिखित घोषित करें : var $ को घोषित करें: कोई भी;

Comments

आपने यह कहाँ रखा है?

— दान चेस

आप कक्षा में पुस्तकालयों के आयात के बाद यह जगह कर सकते हैं @DanChase

— Ilir Hushi

jquery usinng कोणीय-cli को हटाने के लिए इस अच्छे लेख के लिए एक नज़र डालें: medium.com/@swarnakishore/…

— Pavel

Answer 5

स्वीकृत उत्तर सही नहीं है, और इसे प्रश्न मानकर स्वीकार करने का कोई मतलब नहीं है

DOMA तैयार होने पर ngAfterViewInit ट्रिगर होगा

जब पृष्ठ घटक केवल बनाना शुरू कर रहा है, तो व्हाइन ngOnInit ट्रिगर होगा

Comments

केवल अपने उत्तर में अपने समाधान के बारे में बहुत स्पष्ट होने की कोशिश करें और यदि आपको लगता है कि कुछ उत्तर सही नहीं है, तो इसके बजाय उस प्रश्न पर टिप्पणी करने पर विचार करें।

— जीशान आदिल

कोई बात नहीं, बस अधिक लोगों की मदद करने के लिए अपने उत्तर को और अधिक स्पष्ट करने का प्रयास करें। एक न्यूनतम कोड उदाहरण के साथ।

— जीशान आदिल

Answer 6

DOMContentLoaded के बाद आपके main.ts फ़ाइल बूटस्ट्रैप में इसलिए कोणीय लोड हो जाएगा जब DOM पूरी तरह से लोड हो जाता है।

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}



document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
});