Pergunta simples, espero.
Quero executar um script quando o equivalente Angular2 de $ document.ready () for disparado. Qual é a melhor maneira de conseguir isso?
Tentei colocar o script no final de index.html
, mas como descobri, isso não funciona! Presumo que tenha que ir em algum tipo de declaração de componente?
É possível executar o carregamento do script de um .js
arquivo?
EDITAR - Código:
Eu tenho os seguintes plug-ins js e css injetados em meu aplicativo (a partir do tema 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
Conforme observado, o script.js 'instancia' a coisa toda e, portanto, precisa ser executado depois que o Angular estiver pronto. script.js
Funcionou:
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
}
Respostas:
Você pode disparar um evento por conta própria em
ngOnInit()
seu componente raiz Angular e, em seguida, ouvir esse evento fora do Angular.Este é o código Dart (não sei TypeScript), mas não deve ser tão difícil de traduzir
fonte
ngAfterViewInit() { ... }
. Não há necessidade de disparar um evento.Copiando a resposta de Chris:
Funcionou:
fonte
AfterViewChecked
, mas mesmo assim, aqui está um voto positivo por me apontar na direção certa.ngAfterViewInit()
. Exwindow.MY_APP = {}; MY_APP.init = function () {/*copy all that script.js here*/ }
. Em seguida, em seu componente,import ...; declare var MY_APP: any; class HomeComponent() { ngAfterViewInit() { MY_APP.init(); } }
mas o resultado final é que você não tem um aplicativo angular2 - seu script.js é basicamente uma página jquery da velha escola. Você pode transformar a maior parte em componentes NG2.$document.ready()
.Escolhi essa solução para não precisar incluir meu código js personalizado dentro do componente, exceto a função jQuery $ .getScript .
Descobri que esta é uma boa maneira de contornar arquivos js personalizados ou de fornecedores que não têm tipificações disponíveis, de forma que o TypeScript não grite com você quando você iniciar o aplicativo.
Atualizar Na verdade, no meu cenário, o evento de ciclo de vida OnInit funcionou melhor porque impediu o script de carregar depois que as visualizações foram carregadas, que era o caso com ngAfterViewInit, e isso faz com que a visualização mostre posições incorretas dos elementos antes do carregamento do script.
fonte
Cannot find name '$'.
quando tento seguir este exemplo?npm install @types/jquery -D
uma chance? : DPara usar o jQuery dentro do Angular, declare $ apenas como segue: declare var $: any;
fonte
a resposta aceita não é correta, e não faz sentido aceitá-la considerando a questão
ngAfterViewInit será acionado quando o DOM estiver pronto
whine ngOnInit será acionado quando o componente da página estiver apenas começando a ser criado
fonte
Em seu arquivo main.ts, inicialize após DOMContentLoaded, então o angular será carregado quando o DOM estiver totalmente carregado.
fonte