Angular2 equivalente a $document.pronto()
Eu quero executar um script quando o Angular2 equivalente a $document.pronto está despedido. Qual é a melhor forma de o conseguir?
Já tentei pôr o guião no fim do filme, mas como descobri, isto não funciona! Presumo que tenha de entrar em algum tipo de declaração componente? é possível executar carregar o programa a partir de um ficheiro .js?
EDIT-Code:
Tenho os seguintes plugins js e css injectados em a minha aplicação (a partir do tema HTML da fundição). <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 foi dito, os scripts.js 'instantiates' a coisa toda, e assim é necessário para ser executado após Angular está pronto. script.js
consegui que funcionasse.:
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
}
5 answers
Você pode disparar um evento em ngOnInit() do seu componente Angular raiz e depois ouvir este evento fora do Angular.
Este é o código de dardos (não sei dactilografar) mas não deve ser difícil de traduzir
@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'));
}
}
A copiar a resposta do Chris:
Consegui que funcionasse.:
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
}
Eu fui com esta solução então eu não tive que incluir o meu código JS personalizado dentro do componente que não o jQuery {[[4]}$.função getScript.
Nota: depende do jQuery. Então você vai precisar de jQuery e jQuery typings.
Eu descobri que esta é uma boa maneira de contornar os arquivos JS personalizados ou fornecedores que não têm digitos disponíveis dessa forma TypeScript não grita com você quando você vai para iniciar o seu aplicativo.
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 Realmente no meu cenário, o evento OnInit lifecycle funcionou melhor porque impediu o script de carregar depois que as vistas foram carregadas, o que foi o caso com ngAfterViewInit, e que faz com que a vista mostre posições de elementos incorretas antes do Carregamento do script.
ngOnInit() {
$.getScript('../js/mimity.js');
}
Para usar o jQuery dentro do Angular apenas declare o $ como se segue: declare var $: qualquer;
A resposta aceite não está correcta, e não faz sentido aceitá-la considerando a pergunta
O NgAfterViewInit despoletará quando o DOM estiver pronto
Se o ngOnInit for activado quando o componente da Página estiver apenas a começar a ser criado