1

Olá, tenho um component Angular que necessita de um aquivo de script específico!

Esse component não é iniciado na primeira tela da minha aplicação, por isso não posso colocar meu arquivo de script no Bundler, pois pelo o Bundler esse arquivo é carregado apenas uma vez que é a inicialização do primeiro compoenent que será carregado. Por exemplo:

No meu 3º component tenho um Input de id 'data', e nesse arquivo jquery tem uma chamda desse Id dessa forma: $('#data'). Quando o bundler sobe esse arquivo, ele sobe no 1º component apenas e quando chega no 3º ele não carrega novamente, impossibilitando a leitura do meu Id.

Gostaria de saber se não tem um jeito de chamar esse arquivo especifico apenas quando meu component for chamado, dessa forma por exemplo:

<script src="../../../../scripts/teste.js"></script>

<div class="container">
    <p class="interest-preference">Escolha uma data e horário.</p>
    
    <!--adjust Form Position-->
    <div class="clear"></div>
    
    <div class="wrap-input">
        <input class="date-picker input.validator" id="datepicker" name="datepicker" type="text" placeholder="Data">
        <label class="label-input" for="data">
            <span class="far fa-calendar-alt"></span>
        </label>
    </div>
    
    <div class="wrap-input">
        <input class="timepicker" type="text" name="horario" id="horario" placeholder="Horário">
        <label class="label-input" for="horario">
            <span class="far fa-clock"></span>
        </label>
    </div>
    
    <div class="wrap-input">
        <div class="wrap-btn">
            <button class="btn">
                CONFIRMAR
            </button>
        </div>
    </div>
</div>

Erro apresentado

inserir a descrição da imagem aqui

1 Resposta 1

2

Eu fiz este método genérico para adicionar um js dinamicamente. Veja que o método e assíncrono. Então so use o script no callback.

constructor(private renderer: Renderer2) {
}

addJsToElement(src: string): HTMLScriptElement {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    this.renderer.appendChild(document.body, script);
    return script;
  }

chame o metodo assim:

this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => {
        console.log('SkyScanner Tag loaded');
}

STACKBLITZ

14
  • Eu consigo substituir esse link passado como parâmetro, por caminho de um arquivo local? por exemplo: this.addJsToElement('../../../scripts/teste.js').... Commented 11/06/2018 às 11:09
  • tenta colocar o arquivo dentro da pasta assets Commented 11/06/2018 às 11:14
  • e o caminho e da mesma forma que vc usa coisas do assets normalmente "assets/js/myfile.js" Commented 11/06/2018 às 11:15
  • Coloquei a chamada no método: 'ngOnInit()' e não deu certo. coloquei desta forma: ngOnInit(): void { this.formulario = this.construirFormGroup(this.inputs); this.addJsToElement('../../../../scripts/animacao.js').onload = () => { console.log('SkyScanner Tag loaded'); } } Commented 12/06/2018 às 14:53
  • coloca o script dentro da pasta assets Commented 12/06/2018 às 14:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .