Neu in Angular 4 - Dynamic Components

Mit der neuen ngComponentOutlet Direktive ist es nun möglich, dynamische Komponenten in einer deklarativen Art und Weise erstellen. Vorher war es komplex und sehr aufwendig, dynamische Komponenten zu erstellen, da man sehr viel Code selbst schreiben musste.

Jetzt ist der Einsatz der ngComponentOutlet Direktive sehr viel einfacher geworden!

Im folgenden Beispiel soll der Benutzer entsprechend begrüsst werden. Handelt es sich um den ersten Besuch auf der Seite, soll eine andere Begrüssung angezeigt werden, wie bei einem erneuten Besuch.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

@Component({
    selector: 'app-first-time-visitor',
    template: '<h1>Welcome to b-nova!</h1>',
})
export class FirstTimeVisitorComponent {}

@Component({
    selector: 'app-repeating-visitor',
    template: '<h1>Welcome Back to b-nova!</h1>',
})
export class RepeatingVisitorComponent {}

@Component({
    selector: 'app-root',
    template: `
    <h1>Hello b-nova Friend</h1>
    <ng-container *ngComponentOutlet="welcome"></ng-container>
    `
})
export class App implements OnInit{
    welcome = FirstTimeVisitorComponent;

    ngOnInit() {
        if(!this.user.isfirstVisit){
            this.welcome = RepeatingVisitorComponent;
        }
    }
}

In der Application definieren wir die ngComponentOutlet Direktive mit der welcome Referenz. Diese Referenz wird initialisiert mit der FirstTimeVisitorComponent. Anschliessend wird in der ngOnInit überprüft, ob es sich um den ersten oder einen wiederkehrenden Besuch handelt. Im Falle eines wiederkehrenden Besuchers wird die welcome Referenz auf die RepeatingVisitorComponent gesetzt. So wird dem wiederkehrenden Besucher die Nachricht Welcome Back to b-nova! anstatt Welcome to b-nova! angezeigt.