Problema de enrutamiento en angular

Question

Para empezar, comencé con angular hace unos días y encontré este extraño problema en el enrutamiento. Importé el "RouterModule", agregué la ruta y el componente en consecuencia. Además, se agregó la salida del enrutador al archivo app.component.html. Aquí están mis problemas:

1. No puedo pasar de un componente o página a otro a través de la barra de navegación. Por ejemplo, si estoy en la página de inicio, puedo ir fácilmente a otra página, pero si quiero ir a una página diferente y hacer clic en su enlace, primero se me redirige automáticamente a la página de inicio.

2. Todas las páginas nuevas que abro todavía contienen el código completo de la página de inicio. Aunque sé que se debe a que agregué enrutador-salida justo en la parte superior de la página de inicio (escribí el código de mi página de inicio en app.component.html), pero cuál es una mejor alternativa.

PD: Las preguntas pueden ser demasiado para principiantes, pero tengan paciencia conmigo.

¡¡Gracias!!

Answer 1

1. Asegúrate de navegar así <a routerlink="/contact">Contact Page</a>. No NO utilizar href.
2. Agregue otro componente donde agrega el router-outlet. Luego, convierte su página de "inicio" en la ruta predeterminada. Por supuesto, puede mantener los componentes estáticos fuera de la salida (¿tal vez la barra de navegación y el pie de página?) Y agregarlos en el componente al lado del router-outlet.

Answer 2

1. Asegúrese de haber configurado correctamente la configuración del enrutador, por ejemplo.

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

1. Agregue router-outletsu app.component.html
2. En su componente principal, en el ejemplo anterior home.component.html agregue routerLinky router-outletcargue los niños,

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