Pregunta simple, espero.
Quiero ejecutar un script cuando se activa el equivalente Angular2 de $ document.ready (). ¿Cuál es la mejor manera de lograr esto?
Intenté poner el guión al final index.html
, pero descubrí que esto no funciona. ¿Supongo que tiene que ir en algún tipo de declaración de componente?
¿Es posible ejecutar la carga del script desde un .js
archivo?
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 'crea una instancia' de todo y, por lo tanto, debe ejecutarse 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
}
Respuestas:
Puede disparar un evento usted mismo en
ngOnInit()
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
fuente
ngAfterViewInit() { ... }
. No es necesario disparar un evento.Copiando la respuesta de Chris:
Lo tengo funcionando:
fuente
AfterViewChecked
, pero de todos modos, aquí hay un voto a favor por señalarme en la dirección correcta.ngAfterViewInit()
. Ejwindow.MY_APP = {}; MY_APP.init = function () {/*copy all that script.js here*/ }
. Luego, en su componente,import ...; declare var MY_APP: any; class HomeComponent() { ngAfterViewInit() { MY_APP.init(); } }
pero la conclusión es que no tiene una aplicación angular2: su script.js es básicamente una página jquery de la vieja escuela. Podrías convertir la mayor parte en componentes NG2.$document.ready()
.Fui con esta solución para no tener que incluir mi código js personalizado dentro del componente que no sea la función jQuery $ .getScript .
Descubrí que esta es una buena manera de sortear los archivos js personalizados o de proveedores que no tienen mecanografía disponible de esa manera, TypeScript no te grita cuando inicias tu aplicación.
Actualización En realidad, en mi escenario, el evento del ciclo de vida OnInit funcionó mejor porque impidió que el script se cargara después de que se cargaran las vistas, que fue el caso de ngAfterViewInit, y eso hace que la vista muestre posiciones incorrectas de los elementos antes de cargar el script.
fuente
Cannot find name '$'.
cuando trato de seguir este ejemplo?npm install @types/jquery -D
? : DPara usar jQuery dentro de Angular solo declare $ como sigue: declare var $: any;
fuente
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 esté empezando a crearse
fuente
En su archivo main.ts , arranque después de DOMContentLoaded, por lo que angular se cargará cuando DOM esté completamente cargado.
fuente