$document.ready()에 해당하는 Angular2

$document.ready()에 해당하는 Angular2

간단한 질문이면 좋겠네요.

$document.ready()에 해당하는 Angular2가 실행될 때 스크립트를 실행하고 싶습니다.이를 달성하는 가장 좋은 방법은 무엇입니까?

저는 대본을 마지막에 넣으려고 노력했습니다.index.html하지만 제가 알아냈듯이, 이것은 효과가 없습니다!어떤 종류의 구성 요소 선언에 포함되어야 한다고 생각합니까?

에서 스크립트 로드를 실행할 수 있습니까?.js파일?

편집 - 코드:

(Foundry html 테마에서) 애플리케이션에 다음과 같은 js 및 css 플러그인을 삽입했습니다.

    <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

설명한 대로 script.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
    }

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
    }

이벤트를 직접 실행할 수 있습니다.ngOnInit()Angular 루트 구성 요소를 찾은 다음 Angular 외부에서 이 이벤트를 수신합니다.

이것은 다트 코드이지만 (나는 타입스크립트를 모른다) 번역하는 것은 어렵지 않을 것입니다.

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

저는 이 솔루션을 사용했기 때문에 jQuery $.getScript 함수 이외의 구성 요소에 제 커스텀 js 코드를 포함할 필요가 없었습니다.

참고: 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 라이프사이클 이벤트가 더 잘 작동했는데, 이는 ngAfterView의 경우와 마찬가지로 보기가 로드된 후 스크립트가 로드되지 않았기 때문입니다.그러면 스크립트를 로드하기 전에 보기에 잘못된 요소 위치가 표시됩니다.

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

받아들여진 대답은 정확하지 않고, 질문을 고려할 때 그것을 받아들이는 것은 말이 안 됩니다.

ngAfterViewDOM이 준비되면 Init이 트리거됩니다.

wingOnInit는 페이지 구성 요소가 생성되기 시작할 때만 트리거합니다.

Angular 내부에서 jQuery를 사용하려면 $를 다음과 같이 선언해야 합니다. var $: any;

DOM ContentLoaded 후 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));
});

언급URL : https://stackoverflow.com/questions/34547127/angular2-equivalent-of-document-ready