Wie das Routing ohne Komponenten den sinnvollen Aufbau einer Angular-Anwendung unterstützen kann
Der Aufbau einer Angular-Anwendung sollte sich in einem logischen URL-Aufbau widerspiegeln. Dazu ist es notwendig, dass man die kleinen Tricks und Kniffe beim Erstellen des Angular-Routings kennt und optimal anwendet.
Einer dieser kleinen Kniffe ist das Routing ohne Komponenten. Oftmals genügt es, an jedem Routing-Punkt eine Komponente zu hinterlegen und diese entweder mit einem Router-Outlet zu versehen, um innerhalb dieser Komponente tiefergehende Inhalte anzuzeigen, oder tieferliegende Komponenten direkt zu verlinken.
So kann man beispielsweise vom Routingpunkt /main aus zwischen den immer sichtbaren Header- und Footer-Komponenten den Hauptinhalt der Webanwendung mittels Pfaden wie /main/employees/:id für einzelne Mitarbeiter oder /main/company für eine Unternehmensseite verlinken.
Beispiel: Der Hauptinhalt der Seite wird per Router-Outlet zwischen Header und Footer eingefügt
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
Oder man kann vom Pfad /main/employees/:id aus durch Verlinkung auf den Pfad /main/employees/:id/edit die Daten des gewählten Mitarbeiters bearbeiten.
Beispiel: Tieferes Routing durch einfache Verlinkung vom Lese- in den Bearbeitungsmodus eines Formulars
<table>
<tr>
<th>Name</th>
<td>employee.name</td>
</tr>
<tr>
<th>Position</th>
<td>employee.position</td>
</tr>
</table>
<a routerLink="./edit">Bearbeiten</a>
Ab und zu kommt es jedoch vor, dass diese beiden Standardmethoden nicht ausreichen. Z. B. könnte unsere Anwendung zusätzlich noch eine Liste aller Mitarbeiter unter /main/employees/overview anzeigen sollen, ohne dass wir explizit eine Komponente für den Pfad /main/employees vorgesehen hätten.
Die eleganteste Lösung dafür ist das Routing ohne Komponenten. Dazu gibt man in seiner Routing-Konfiguration keinen component-Eintrag an, sondern verweist mittels children auf die tieferliegenden Komponenten.
Beispiel: Mittels children-Eigenschaft direkt auf tieferliegende Komponente verweisen
const routes: Routes = [
{ path: '', redirectTo: 'company', pathMatch: 'full' },
{ path: 'employees', children: employeesChildRoutes },
{ path: 'company', component: CompanyComponent, data: { title: 'Unser Unternehmen' } },
]
const employeesChildRoutes: Routes = [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', component: EmployeeOverviewComponent, data: { title: 'Übersicht Mitarbeiter' } },
{ path: ':id', component: EmployeeReadComponent, data: { title: 'Ansicht Mitarbeiter' } },
{ path: ':id/edit', component: EmployeeEditComponent, data: { title: 'Mitarbeiter bearbeiten' } },
];
// configure module
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class EmployeeRoutingModule { }
So vermeidet man das Anlegen einer fast leeren Komponente, die nur ein Router-Outlet enthielte, und hält seine Anwendung schlank und performant.