Angular2 setara dengan $ document.ready ()

Pertanyaan sederhana, saya harap.

Saya ingin menjalankan skrip ketika Angular2 yang setara dengan $ document.ready () dipecat. Apa cara terbaik untuk mencapai ini?

Saya sudah mencoba meletakkan skrip di akhir index.html, tetapi setelah saya tahu, ini tidak berhasil! Saya menganggap itu harus masuk dalam semacam deklarasi komponen?

Apakah mungkin untuk menjalankan memuat skrip dari .jsfile?

EDIT - Kode:

Saya memiliki plugin js dan css berikut yang dimasukkan ke dalam aplikasi saya (dari tema html Foundry ).

    <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

Seperti dicatat, scripts.js 'instantiates' semuanya, dan dengan demikian perlu dijalankan setelah Angular siap. script.js

Berhasil:

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
    }

Anda dapat mengaktifkan acara sendiri di ngOnInit()komponen root Angular Anda dan kemudian mendengarkan acara ini di luar Angular.

Ini adalah kode Dart (saya tidak tahu TypeScript) tetapi seharusnya tidak sulit untuk diterjemahkan

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

Menyalin jawaban dari Chris:

Berhasil:

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
    }

Saya menggunakan solusi ini jadi saya tidak perlu menyertakan kode js kustom saya di dalam komponen selain fungsi jQuery $ .getScript .

Catatan: Memiliki ketergantungan pada jQuery. Jadi, Anda perlu mengetik jQuery dan jQuery.

Saya telah menemukan ini adalah cara yang baik untuk menyiasati file js kustom atau vendor yang tidak memiliki pengetikan yang tersedia dengan cara itu TypeScript tidak berteriak pada Anda ketika Anda pergi untuk memulai aplikasi Anda.

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

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

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

Perbarui Sebenarnya dalam skenario saya, peristiwa siklus hidup OnInit bekerja lebih baik karena mencegah skrip dimuat setelah tampilan dimuat, yang merupakan kasus ngAfterViewInit, dan yang menyebabkan tampilan menampilkan posisi elemen yang salah sebelum pemuatan skrip.

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

Untuk menggunakan jQuery di dalam Angular hanya mendeklarasikan $ sebagai berikut: mendeklarasikan var $: any;

jawaban yang diterima tidak benar, dan tidak masuk akal untuk menerimanya mengingat pertanyaan itu

ngAfterViewInit akan terpicu saat DOM sudah siap

whine ngOnInit akan terpicu saat komponen halaman baru mulai dibuat

Di file main.ts Anda, bootstrap setelah DOMContentLoaded, jadi angular akan dimuat saat DOM dimuat penuh.

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