Angular2 tương đương với $ document.ready ()

Tôi hy vọng câu hỏi đơn giản.

Tôi muốn chạy một tập lệnh khi Angular2 tương đương với $ document.ready () được kích hoạt. cách tốt nhất để đạt được điều này là gì?

Tôi đã thử đặt tập lệnh vào cuối index.html, nhưng khi tôi phát hiện ra, điều này không hoạt động! Tôi hiểu rằng nó phải đi trong một số loại khai báo thành phần?

Có thể chạy tải tập lệnh từ .jstệp không?

EDIT - Mã:

Tôi đã đưa các plugin js và css sau vào ứng dụng của mình (từ chủ đề 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

Như đã lưu ý, scripts.js 'khởi tạo' toàn bộ và do đó nó cần được chạy sau khi Angular sẵn sàng. script.js

Làm cho nó hoạt động:

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
    }

Bạn có thể tự kích hoạt một sự kiện trong ngOnInit()thành phần gốc Angular của mình và sau đó lắng nghe sự kiện này bên ngoài Angular.

Đây là mã Dart (tôi không biết TypeScript) nhưng không khó dịch

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

Sao chép câu trả lời từ Chris:

Làm cho nó hoạt động:

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
    }

Tôi đã sử dụng giải pháp này để không phải đưa mã js tùy chỉnh của mình vào thành phần khác với hàm jQuery $ .getScript .

Lưu ý: Có phụ thuộc vào jQuery. Vì vậy, bạn sẽ cần jQuery và jQuery typings.

Tôi nhận thấy đây là một cách tốt để truy cập các tệp js tùy chỉnh hoặc của nhà cung cấp không có sẵn kiểu đánh máy theo cách đó TypeScript không hét vào mặt bạn khi bạn khởi động ứng dụng của mình.

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

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

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

Cập nhật Thực tế trong kịch bản của tôi, sự kiện vòng đời OnInit hoạt động tốt hơn vì nó ngăn tập lệnh tải sau khi các chế độ xem được tải, trường hợp này xảy ra với ngAfterViewInit và điều đó khiến chế độ xem hiển thị vị trí phần tử không chính xác trước khi tải tập lệnh.

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

Để sử dụng jQuery bên trong Angular, chỉ khai báo $ như sau: khai báo var $: any;

câu trả lời được chấp nhận là không đúng và không có lý do gì để chấp nhận nó khi xem xét câu hỏi

ngAfterViewInit sẽ kích hoạt khi DOM sẵn sàng

whine ngOnInit sẽ kích hoạt khi thành phần trang chỉ bắt đầu được tạo

Trong tệp main.ts của bạn, bootstrap sau DOMContentLoaded vì vậy, góc cạnh sẽ tải khi DOM được tải đầy đủ.

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