2
respostas

Importando e executando arquivo JavaScript em apenas um componente do projeto

Boa tarde, eu abri um tópico porém eu acabei fechando pois não abri de uma forma correta, gostaria de uma ajuda.

Tenho um arquivo JavaScript com o nome home.js, esse arquivo contém uma função que faz várias modificações em minha página HTML que foi renderizada, vou colocar abaixo um exemplo dessa função:

$(function() {
    alert('Hello World');
}    

Eu preciso chamar esse arquivo home.js apenas quando eu carregar um componente em especifico, como por exemplo o home.component.html, nos demais componentes eu não quero utilizar essa função, a pergunta é, como eu posso chamar esse arquivo home.js dentro e apenas no meu componente home utilizando um ciclo de vida do angular seguindo o exemplo:

ngOnInit() { 
    // Carregando e executando o arquivo home.js aqui para modificações no HTML do template home.component.html
}
2 respostas

Boa tarde, sobre a dúvida a cima eu consegui resolver parcialmente da seguinte forma, no componente eu faço o import da biblioteca JavaScript:

import { Home } from '../../../assets/js/home.js';

No método ngOnInit do Componente Home eu instancio a variável que foi importada:

ngOnInit(): void {

        home : Home ;

    }

Eu apliquei o Lazy Loading para acessar o Home, portanto, no carregamento da aplicação é iniciado o Componente Login, ao fazer o Login é iniciado o Componente Home com seu arquivo JavaScript embutido, mas há um problema, quando eu saiu do Home a aplicação volta ao Login, porém quando eu me logo novamente, a variável não é instanciada novamente, ou seja, o alert do primeiro post não é apresentado, alguém sabe me ajudar no porque? Sendo que o método OnInit é chamado todas as vezes que o Componente é carregado.

Fala Eduardo, tudo bom?

Você pode criar o arquivo com esse JavaScript e só fazer um import dele no Módulo Angular que você carregaria como módulo Async

https://angular-2-training-book.rangle.io/handout/routing/child_routes.html