$ Document.ready () 'nin Angular2 eşdeğeri

Umarım basit bir soru.

$ Document.ready () 'nin Angular2 eşdeğeri çalıştırıldığında bir komut dosyası çalıştırmak istiyorum. Bunu başarmanın en iyi yolu nedir?

Senaryoyu sonuna koymayı denedim index.htmlama öğrendiğim gibi bu işe yaramıyor! Bir tür bileşen beyanına girmesi gerektiğini anlıyorum?

Komut .jsdosyasını bir dosyadan çalıştırmak mümkün mü ?

DÜZENLE - Kod:

Uygulamama aşağıdaki js ve css eklentileri eklenmiştir ( Foundry html temasından ).

    <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

Belirtildiği gibi, scripts.js her şeyi 'somutlaştırır' ve bu nedenle Angular hazır olduktan sonra çalıştırılması gerekir. script.js

Çalışıyor:

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
    }

Kendiniz bir olay başlatabilirsiniz ngOnInit()Angular kök bileşeninizden tetikleyebilir ve ardından bu olayı Angular dışında dinleyebilirsiniz.

Bu Dart kodu (TypeScript bilmiyorum) ama çevirmesi zor olmamalı

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

Yanıtı Chris'ten kopyalamak:

Çalışıyor:

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
    }

Bu çözüme gittim, böylece özel js kodumu jQuery $ .getScript işlevi dışındaki bileşene dahil etmek zorunda kalmadım .

Not: jQuery'ye bağımlıdır. Bu yüzden jQuery ve jQuery yazımlarına ihtiyacınız olacak.

Bunun, uygulamanızı başlatmaya gittiğinizde TypeScript'in size çığlık atmadığı şekilde yazımları olmayan özel veya satıcı js dosyalarında dolaşmanın iyi bir yolu olduğunu buldum.

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

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

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

Güncelle Aslında benim senaryomda, OnInit yaşam döngüsü olayı daha iyi çalıştı, çünkü görünümler yüklendikten sonra komut dosyasının yüklenmesini engelledi, bu, ngAfterViewInit için geçerliydi ve bu, komut dosyası yüklenmeden önce görünümün yanlış öğe konumlarını göstermesine neden oldu.

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

JQuery'yi Angular içinde kullanmak için sadece $ 'ı aşağıdaki gibi bildirin: var $: any;

kabul edilen cevap doğru değil ve soruyu dikkate alarak kabul etmenin bir anlamı yok

ngAfterViewInit, DOM hazır olduğunda tetiklenecektir

whine ngOnInit, sayfa bileşeni henüz oluşturulmaya başladığında tetiklenecektir

Senin içinde main.ts DOM tamamen yüklendiğinde DOMContentLoaded sonra dosya bootstrap açısal yükleyecektir yüzden.

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));
});