Читать книгу Angular - Ferdinand Malcher - Страница 136

Rule of One

Eine Komponente wird immer in einer eigenen TypeScript-Datei notiert. Dahinter steht das Rule of One: Eine Datei beinhaltet immer genau einen Bestandteil und nicht mehr. Dazu kommen meist ein separates Template, eine Style-Datei und eine Testspezifikation. Diese vier Dateien sollten wir immer gemeinsam in einem eigenen Ordner unterbringen. So wissen wir sofort, welche Dateien zu der Komponente gehören.

Eine Komponente besitzt einen Selektor und wird automatisch an die DOM-Elemente gebunden, die auf diesen Selektor matchen. Das jeweilige Element wird das Host-Element der Komponente. Das Prinzip haben wir einige Seiten zuvor schon beleuchtet.

Komponenten im AppModule registrieren

Damit dieser Mechanismus funktioniert, muss Angular die Komponente allerdings erst kennenlernen. Die reine Existenz einer Komponentendatei reicht nicht aus. Stattdessen müssen wir alle Komponenten der Anwendung im zentralen AppModule registrieren.

Dazu dient die Eigenschaft declarations im Decorator @NgModule(). Hier werden alle Komponenten² notiert, die zur Anwendung gehören. Damit wir die Typen dort verwenden können, müssen wir alle Komponenten importieren.

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FooComponent } from './foo/foo.component';

import { BarComponent } from './bar/bar.component';

@NgModule({

declarations: [

AppComponent,

FooComponent,

BarComponent

],

// ...

})

export class AppModule { }