Quick-Tipp: Routing ohne Komponente in Angular

von Christoph Gerken,
assono GmbH, Standort Kiel,

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.

Nächste Artikel in dieser Reihe:

Fachbeitrag Web-Entwicklung Angular

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Sie wollen eine individuelle Lösung? Kontaktieren Sie uns

Weitere interessante Artikel

Sie haben Fragen? Wir sind für Sie da.

Wir verwenden Ihre Daten, um Sie einmalig per E-Mail zu kontaktieren. Wir geben Ihre Daten nicht an Dritte weiter. Siehe: Datenschutzhinweise
assono GmbH

Standort Kiel (Zentrale)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 407
Techn. Hotline: +49 4307 900 403
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de