navigationend - Equivalente angular2 de $ document.ready()

router events angular 6

Question

Pregunta simple, espero.

Quiero ejecutar un script cuando se dispara el equivalente Angular2 de $ document.ready (). ¿Cuál es la mejor manera de lograr esto?

Intenté poner el script al final de index.html , pero como descubrí, ¡esto no funciona! ¿Supongo que tiene que ir en algún tipo de declaración de componente?

¿Es posible ejecutar cargar el script desde un archivo .js ?

EDITAR - Código:

Tengo los siguientes complementos js y css inyectados en mi aplicación (del tema html de 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

Como se señaló, scripts.js ''instancia'' todo el proceso y, por lo tanto, es necesario ejecutarlo después de que Angular esté listo. script.js

Lo tengo funcionando:

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
    }

Answer 1

Copiando la respuesta de Chris:

Lo tengo funcionando:

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
    }

Answer 2

En su archivo main.ts bootstrap después de DOMContentLoaded, se cargará angular cuando DOM esté completamente cargado.

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

Answer 3

Para usar jQuery dentro de Angular solo declare $ como sigue: declare var $: any;

Answer 4

Puede activar un evento usted mismo en ngOnInit() de su componente raíz Angular y luego escuchar este evento fuera de Angular.

Este es el código Dart (no sé TypeScript) pero no debería ser difícil de traducir

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

Answer 5

la respuesta aceptada no es correcta, y no tiene sentido aceptarla considerando la pregunta

ngAfterViewInit se activará cuando el DOM esté listo

whine ngOnInit se activará cuando el componente de la página solo esté comenzando a crearse

Answer 6

Elegí esta solución para no tener que incluir mi código js personalizado dentro del componente que no sea la función jQuery $ .getScript .

Nota: tiene una dependencia de jQuery. Por lo tanto, necesitará jQuery y jQuery.

He descubierto que esta es una buena manera de evitar los archivos js personalizados o de proveedores que no tienen tipificación disponible de esa manera, TypeScript no te grita cuando vas a iniciar tu aplicación.

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

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

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

Actualizar En realidad, en mi escenario, el evento del ciclo de vida de OnInit funcionó mejor porque impidió que el script se cargara después de que se cargaran las vistas, que fue el caso con ngAfterViewInit, y eso hace que la vista muestre posiciones de elementos incorrectas antes de la carga del script.

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