Routing-Problem im Winkel

Question

Für den Anfang habe ich vor ein paar Tagen mit Angular angefangen und dieses seltsame Problem beim Routing festgestellt. Ich habe das "RouterModule" importiert und den Pfad und die Komponente entsprechend hinzugefügt. Außerdem wurde der Datei app.component.html ein Router-Ausgang hinzugefügt. Hier sind meine Probleme:

1. Ich kann nicht über die Navigationsleiste von einer Komponente oder Seite zu einer anderen wechseln. Wenn ich beispielsweise auf der Startseite bin, kann ich problemlos zu einer anderen Seite wechseln. Wenn ich jedoch zu einer anderen Seite wechseln und auf deren Link klicken möchte, werde ich automatisch zuerst zur Startseite weitergeleitet.

2. Alle neuen Seiten, die ich öffne, enthalten weiterhin den vollständigen Code der Startseite. Ich weiß zwar, dass es daran liegt, dass Router-Outlet direkt über der Homepage hinzugefügt wird (ich habe meinen Homepage-Code in app.component.html geschrieben), aber was ist eine bessere Alternative?

Ps Die Fragen sind vielleicht zu Anfänger, aber bitte nehmen Sie sie mit.

Vielen Dank!!

Answer 1

1. Stellen Sie sicher, dass Sie so navigieren <a routerlink="/contact">Contact Page</a>. Verwenden Sie NICHT href.
2. Fügen Sie eine weitere Komponente hinzu, in der Sie die hinzufügen router-outlet. Dann machen Sie Ihre "Homepage" zur Standardroute. Natürlich können Sie statische Komponenten außerhalb der Steckdose aufbewahren (z. B. Navbar & Fußzeile?) Und diese in Komponenten neben dem hinzufügen router-outlet.

Answer 2

1. Stellen Sie beispielsweise sicher, dass die Routerkonfiguration ordnungsgemäß eingerichtet ist.

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

1. Fügen Sie router-outletin Ihrer app.component.html hinzu
2. Fügen Sie in Ihrer übergeordneten Komponente im obigen Beispiel home.component.html untergeordnete Komponenten hinzu routerLinkund router-outletladen Sie sie.

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