2

Estou tentando montar um gráfico de hierarquia na página usando um plugin de Angular a partir deste tutorial. Mesmo olhando o demo e tentando colocar os desse mesmo jeito

Quando carrego a página, a página não funciona...

Desse jeito:

<organization-chart [datasource]="ds"></organization-chart>

Não dá erro, mas quando clico no rota onde se encontra a página, a rota não carrega, mas quando tiro o component, do plugin a rota volta a funcionar

Mas esse mesmo gráfico de organização eu consegui carregar usando o html com javascript e jquery,

inserir a descrição da imagem aqui

Tem como eu usar essa mesma estratégia?

De carregar os plugins javascript e css no angular já que o componente não funciona?

Esse foi o jeito que eu consegui montar esse gráfico de organização em JQuery com javascript e css do plugin

const buscarDados = () => {

        $.ajax({
           url: "{{ route('medidor.hierarquia') }}",
           type: "get",
           dataType: "json"
        }).done( r => {
            mountHieraquy(r)
            /*setTimeout(() => {
                buscarDados()
            }, 5000);*/
        })
    }
    const mountHieraquy = ( obj ) => {
        $('#chart-container').html('')

        $('#chart-container').orgchart({
                    data:obj,
                    visibleLevel: 2,
                    nodeTemplate: nodeTemplate,
                    //zoom: true,
                    pan: true

             }) 

$('.ip_medidor').on('click', function(){
            const ip = $(this).data('ip')
            sessionStorage.setItem('medidor', ip)
            sessionStorage.setItem('opcao', 1)
            sessionStorage.setItem('errorCount', 0)
            //location.href= ; 
            const url = ip.indexOf("120") != -1 ? "{{ route('medidor.sepam') }}" : "{{ route('medicao.monitoramento') }}"
            window.open( url, '_blank');
        })       

}

Como link e estilo próprio

Existe uma forma que possa levar esse código para o Angular?

Os arquivos que eu adicionei foram

  • html2cancas.min.js

  • jquery.orgchart.js

  • jquery.orgchart.min.js

  • jquery.orgcart.css

  • jquery.orgchart.min.css

6
  • Cada caso é um caso, só testando mesmo. Mas, o import dos arquivos pode ser feito normalmente colocando-os dentro da tag scripts no arquivo angular.json não?!
    – LeAndrade
    Commented 9/06/2020 às 18:54
  • aI como eu faria a função acima no componente? Commented 9/06/2020 às 19:08
  • Retira o const e a arrow function da função e declara ela normalmente no componente: buscarDados() {...
    – LeAndrade
    Commented 9/06/2020 às 20:06
  • Com o todo esse jquery também? Commented 9/06/2020 às 20:09
  • 1
    Realmente, deu certo! Por favor, adiciona a resposta Commented 9/06/2020 às 21:35

1 Resposta 1

2

Bom só para deixar registrado como resposta aqui no site para futuras pesquisas sobre o assunto. Para a utilização de bibliotecas JavaScript em projetos Angular além do uso de links por CDN na index da aplicação, "pelas boa práticas do framework" o mais indicado é que esses scripts sejam instalados (npm ,yarn, etc...) se possível e declarados no arquivo angular.json dentro da tag scripts.

Exemplo de importação da biblioteca jQuery:

"scripts": [
   "node_modules/jquery/dist/jquery.js",
]

Obtendo assim o seu acesso e utilização globalmente em toda aplicação Angular:

ngOnInit() {
  $(() => {
    console.log('jQuery funcionando') // dispara o log na iniciação do componente
  })
}

EDIT : Se possuir os arquivos das bibliotecas basta inseri-los no diretório assets e indicar o caminho no arquivo angular.json.

2
  • eu coloque no assets o que eu precisa e chamei no arquivo angular.json Commented 9/06/2020 às 22:35
  • 1
    Assim, vc tem as bibliotecas em arquivos, aí inseriu esses arquivos no assets e declarou no angular.json, realmente esqueci dessa possibilidade também, vou editar a resposta.
    – LeAndrade
    Commented 9/06/2020 às 22:38

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 .