mat-tab - Serviço para cada aba

[guilhermecostalopes]

Tenho este código

<mat-card>
  <mat-card-title-group>
    <mat-card-title>Declarações processadas com sucesso</mat-card-title>
  </mat-card-title-group>
</mat-card>
<mat-tab-group (selectedTabChange)="onLinkClick($event)">
  <mat-tab label="Informações comuns">
    <app-informacoes-comum></app-informacoes-comum>
  </mat-tab>
  <mat-tab label="Apuração mensal do ISSQN">
    <app-apuracao-mensal></app-apuracao-mensal>
  </mat-tab>
  <mat-tab label="Demonstrativo contábil">
    <app-demonstrativo-contabil></app-demonstrativo-contabil>
  </mat-tab>
  <mat-tab label="Demonstrativo das partidas dos lançamentos contábeis">
    <app-demonstrativo-partida></app-demonstrativo-partida>
  </mat-tab>
</mat-tab-group>

Cada um , é um componente que foi criado, sendo que cada um deles fazer uma consulta no servidor, para um serviço especifico.

onLinkClick(event: MatTabChangeEvent) {
    console.log('event => ', event);
    console.log('index => ', event.index);
    console.log('tab => ', event.tab);
    if(event.index == 0){

    } else if(event.index == 1){

    } else if(event.index == 2){

    } else if(event.index == 3){

    } 
  }

Tenho este evento que para validar qual tab o usuário clicou.

Estou tentando fazer com que ao entrar o sistema só cerrega tab-0 e não carregando as outras.

As outras só vão ser carregadas, se o usuário clicar na aba especifica.

Como fazer isto ?

[fdaciuk]

Se as abas têm a mesma estrutura dos índices de um array (começa em zero, e vai incrementando de um em um), você pode usar um array de funções, onde cada função vai ficar dentro do array na posição da aba que você precisa ativar.

Exemplo:

const tabsEvents = [
  function funcaoDaAbaComIndice0 () {},
  function funcaoDaAbaComIndice1 () {},
  // e assim por diante...
]

Então, dentro do método que é executado ao selecionar a aba, você chama a função que está posicionada no índice do array que é igual ao seu event.index, ao invés de usar um monte de if, como no seu exemplo:

tabsEvents[event.index]() 

Se event.index for igual a zero, a função que será executada é a função que está no índice zero do array tabsEvents: funcaoDaAbaComIndice0 :)

Outra vantagem de fazer dessa forma é que, se adicionar ou remover alguma aba, no seu JS só vai ter um lugar pra alterar, que é o array tabsEvents, sem precisar adicionar ou remover um if dentro do manipulador de evento :)

[guilhermecostalopes]

Sim isto eu entendi.
Como coloquei, mas as vezes não expliquei direito.

onLinkClick(event: MatTabChangeEvent) {
    console.log('event => ', event);
    console.log('index => ', event.index);
    console.log('tab => ', event.tab);
    if(event.index == 0){

    } else if(event.index == 1){

    } else if(event.index == 2){

    } else if(event.index == 3){

    } 
  }

Este evento acima, faz o que você está falando. O que não consegui fazer ainda é chamar um componente, dentro do if.

Entendeu ?

[fdaciuk]

Entendi. Isso é Angular? Se for, não sei te dizer qual a melhor forma de fazer. Melhor esperar alguém que conheça pra te ajudar =)

[guilhermecostalopes]

Obrigado, mas é Angular.

[felipefialho]

@guilhermecostalopes Você quer carregar um serviço dentro do if?

[guilhermecostalopes]

Então @lfeh , Vou tentar te explicar como está e como desejo.

Como está:

A página tem 5 abas, que chama 5 serviços em um servidor. Este serviço, faz várias consultas, isto é das 5 abas.

Como desejo:

Ao entrar na página, chama as consultas(Serviços) da primeira aba.

Se o usuário não quiser usar algo da primeira aba, ele clica na aba que deseja. Ai sim carrega as consultas(Serviços) da aba que clicou..

Mas respondendo sua pergunta, até então o que consegui ver foi isto, então a resposta é sim.

Mas não consegui implementar ainda.

[ninetails]

Só uma pergunta, pq iniciar a aba no gerenciador de abas e não no init de cada componente dentro da própria aba? Se n me engano o init só vai dar trigger quando for montado, ou estou enganado?

[guilhermecostalopes]

@ninetails , pelo que entendi do seu comentário, acontece isto. Cada Component tem um Init.

Existe uma variável que busco no serviço em comum destas abas, para carregar os combo de cada aba.

[FlavioKlein]

Use o "ng-template" dentro de cada tab assim o conteúdo é carregado dinamicamente sob demanda.
Exemplo:

<mat-tab-group animationDuration="0ms">                      
      <mat-tab label="Exemplo1">
          <ng-template  matTabContent>
              ............
            </ng-template>         
       </mat-tab>
       <mat-tab label="Exemplo2">
          <ng-template  matTabContent>
              ............
          </ng-template>         
       </mat-tab>
</mat-tab-group>