Barras de cabeçalho dinâmicas e / ou conteúdo para seu Ivy Angular App

(Nasreddine Skandrani) (24 de junho de 2020)

Pode ser necessário ter diferentes barras de cabeçalho e / ou conteúdo, por exemplo, para diferentes tipos de usuários. Vamos verificar como fazer isso.

Observação:
se você não usa Angular Ivy (angular 8 e inferior). Você pode dar uma olhada em
minha postagem neste problema do github , onde adicionei um bom link de demonstração para ajudá-lo a carregar lentamente um módulo em versões angulares antigas.
Se você estiver com o Ivy habilitado, continue lendo o artigo que uma solução é apresentada.

Cenário 1: barras de cabeçalho dinâmicas com mesmo conteúdo

Solução 1

Verifique a demonstração online para esta solução 1.

Nesta solução 1, usamos um router-outlet nomeado para lidar com o header bar. Infelizmente, o carregamento lento com loadChildren e router-outlet denominado tem um bug no Angular agora.

Problema de bug no Github -> https://github.com/angular/angular/issues/12842

Esta demonstração termina com este erro no log:

Portanto, por enquanto, esta solução 1 com `loadChildren` não está funcionando, mas pode um dia.

Solução 2

Verifique a demonstração online para esta solução 2.

Nesta solução 2, usamos este artigo . Então, nós direcionamos para um HeaderbarSelectorComponent e então carregamos lentamente o módulo correto com uma condicional padrão de dentro deste componente.

Na demonstração2, você pode alternar os 2 headerbars usando o botão toggle user type no corpo da página e recarregando a página.

❤️ Esta solução está funcionando perfeitamente como você pode ver na demonstração. ❤️

Cenário 2: barras de cabeçalho dinâmicas com conteúdo dinâmico

Aplique a mesma estratégia como cenário1 / solução2 para o carregamento de conteúdo dinâmico.

Você achou esta postagem útil! dê-lhe um pouco 👏👏👏 .
Obrigado

referenciado: 18093 12088 12842

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *