Problema de roteamento em angular

Question

Para começar, comecei com angular alguns dias atrás e encontrei esse problema estranho no roteamento. Importei o "RouterModule", adicionei o caminho e o componente de acordo. Além disso, foi adicionada saída do roteador ao arquivo app.component.html. Aqui estão meus problemas:

1. Não consigo ir de um componente ou página para outro através da barra de navegação. Por exemplo, se estou na página inicial, posso facilmente ir para outra página, mas se eu quiser ir para uma página diferente e clicar em seu link, sou redirecionado automaticamente para a página inicial primeiro.

2. Todas as novas páginas que abro ainda contêm o código completo da página inicial. Embora, eu saiba que é por causa da adição de tomada de roteador apenas no topo da página inicial (eu escrevi o código da minha página inicial em app.component.html), mas o que é uma alternativa melhor.

PS As perguntas podem ser de nível iniciante, mas por favor, tenha paciência comigo.

Obrigado!!

Answer 1

1. Certifique-se de navegar assim <a routerlink="/contact">Contact Page</a>. Você não usar href.
2. Adicione outro componente onde você adiciona o router-outlet. Em seguida, você torna sua página "inicial" a rota padrão. Claro, você pode manter os componentes estáticos fora da tomada (talvez navbar e rodapé?) E adicioná-los no componente lado a lado com o router-outlet.

Answer 2

1. Certifique-se de ter a configuração do roteador configurada corretamente, por exemplo.

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
    children: [
      { path: "child-1", component: ChildComponent1},
      { path: "child-2", component: ChildComponent2 }
    ]
  },
  { path: "", redirectTo: "home", pathMatch: "full" }
];

1. Adicione router-outletem seu app.component.html
2. Em seu componente pai, no exemplo acima home.component.html adicione routerLinke router-outletpara carregar filhos,

<div>
  <button routerLink="child-1">Child-1</button>
  <button routerLink="child-2">Child-2</button>
  <router-outlet></router-outlet>
</div>