Angular2 เทียบเท่ากับ $ document.ready ()

คำถามง่ายๆฉันหวังว่า

ฉันต้องการเรียกใช้สคริปต์เมื่อใช้งาน Angular2 ที่เทียบเท่ากับ $ document.ready () วิธีที่ดีที่สุดในการบรรลุเป้าหมายนี้คืออะไร?

ฉันได้ลองวางสคริปต์ในตอนท้ายของindex.htmlแล้ว แต่อย่างที่ฉันพบมันไม่ได้ผล! ฉันคิดว่ามันต้องมีการประกาศส่วนประกอบบางอย่าง?

เป็นไปได้ไหมที่จะเรียกใช้โหลดสคริปต์จาก.jsไฟล์

แก้ไข - รหัส:

ฉันมีปลั๊กอิน js และ css ต่อไปนี้ที่ฉีดเข้าไปในแอปพลิเคชันของฉัน (จากธีม Foundry 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

ตามที่ระบุไว้สคริปต์. js 'สร้างอินสแตนซ์' ทั้งหมดดังนั้นจึงจำเป็นต้องเรียกใช้หลังจาก Angular พร้อมแล้ว 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
    }

คุณสามารถเริ่มเหตุการณ์ด้วยตัวคุณเองในngOnInit()องค์ประกอบรากเชิงมุมของคุณแล้วฟังเหตุการณ์นี้นอก Angular

นี่คือรหัส Dart (ฉันไม่รู้จัก TypeScript) แต่ไม่ควรแปลยาก

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

คัดลอกคำตอบจาก Chris:

ทำให้มันใช้งานได้:

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
    }

ฉันใช้วิธีแก้ปัญหานี้ดังนั้นฉันจึงไม่ต้องรวมรหัส js ที่กำหนดเองของฉันไว้ในส่วนประกอบอื่นที่ไม่ใช่ฟังก์ชันjQuery $ .getScript

หมายเหตุ: มีการพึ่งพา jQuery ดังนั้นคุณจะต้องใช้ตัวพิมพ์ jQuery และ jQuery

ฉันพบว่านี่เป็นวิธีที่ดีในการเข้าถึงไฟล์ js แบบกำหนดเองหรือผู้ขายที่ไม่มีการพิมพ์ด้วยวิธีนี้ TypeScript จะไม่กรีดร้องใส่คุณเมื่อคุณเริ่มแอป

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

ในการใช้ jQuery ภายใน Angular ให้ประกาศเฉพาะ $ ดังต่อไปนี้: ประกาศ var $: any;

คำตอบที่ยอมรับนั้นไม่ถูกต้องและไม่มีเหตุผลที่จะยอมรับคำตอบเมื่อพิจารณาคำถาม

ngAfterViewInit จะทริกเกอร์เมื่อ DOM พร้อม

เสียงสะอื้น ngOnInit จะทริกเกอร์เมื่อคอมโพเนนต์ของเพจเริ่มสร้างขึ้นเท่านั้น

ในไฟล์ ไฟล์main.ts bootstrapหลังจาก DOMContentLoaded ดังนั้นเชิงมุมจะโหลดเมื่อ 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));
});