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.

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Sie können uns auf verschiedene Weisen für eine unverbindliche Erstberatung erreichen:

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