Angular 2 Ansicht html nach der Verarbeitung

Question

Ich habe unten Winkel 2-Code

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

@Component({ 
    selector: 'app-root', 
    template: 'Waiting on port ', 
}) 
export class AppComponent { 
} 

Als Beispiel ändern Ich mag würde Text "3000" an die Matrize Ausgangs dynamisch anzuhängen. Wie kann dies erreicht werden?

So muss die endgültige Ausgabe

EDIT "auf Port 3000 Waiting" sein: Ich sollte etwas präziser sein können. Ich erwartete etwas wie ein Antwortobjekt, wo ich das HTML ändern konnte, bevor es an das "Frontend" -Rendering gesendet wurde. Angular 2 würde also alle Details in der Vorlage binden und dann die HTML ändern.

Answer 1

@Component({ 
    selector: 'app-root', 
    template: 'Waiting on port {{port}}', 
}) 
export class AppComponent { 
    port:number; 
    someMethod() { 
    this.port = 3000; 
    } 
} 

Answer 2

Zusätzlich zu Günter Zöchbauer ‚s Antwort, wenn Sie die Methode feuern wollte, wenn die Initialisierung der Komponente Sie ngOnInit als Methode verwenden könnte‚nach dagetenbundenen Eigenschaften einer Richtlinie genannt initialisiert werden‘(aus der Dokumentation).

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: 'Waiting on port {{port}}', 
}) 
export class AppComponent implements OnInit { 
    port:number; 
    ngOnInit(): void { 
    this.port = 3000; 
    }; 
} 

OnInit muss in Ihrem Import enthalten sein.