nicht initialisieren mit Wert in Angular2

Question

Ich bin mit Angular2 basteln und habe festgestellt, dass ich nicht in der Lage, eine HTML-Eingabe mit Werten aus dem Controller zu füllen, wenn die Klasse Konstruktor aufgerufen wird. Seltsamerweise füllt die Eingabe die gebundenen Standarddaten nach der Benutzer versucht, den Wert der Eingabe zu ändern. Wie stelle ich anfangs den Wert einer HTML-Eingabe ein, wenn die Ansicht zuerst geladen wird, so dass die Eingabe bereits mit Text gefüllt ist?

Dies ist die HTML-Vorlage ...

<div class="row"> 
    <div class="col-md-3">Username:</div> 
    <div class="col-md-9"><input [(ngModel)]="CurrentUser.Username" /></div>  
</div> 
<div class="row"> 
    <div class="col-md-3">Password:</div> 
    <div class="col-md-9"><input [(ngModel)]="CurrentUser.Password" /></div>  
</div> 
<div class="row"> 
    <div class="col-md-3"></div> 
    <div class="col-md-9"><button class="btn btn-sm btn-primary"  (click)="signin()">Sign in</button></div>  
</div> 

Hier ist die Komponente (Controller) ist ...

import {Component} from 'angular2/core' 
import {UserService} from '../services/user-current.service'; 

@Component({ 
    templateUrl: './app/templates/signin.template.html' 
}) 


export class SigninComponent { 
    private CurrentUser: UserService;  
    constructor(private userService:UserService) { 
     this.CurrentUser = userService 
    } 
} 

aus Gründen der Referenz, habe ich den Dienst enthalten, dass die Lasten Daten, die ich in der hTML-Eingabe angezeigt werden soll ...

import {Injectable} from "angular2/core"; 

@Injectable() 

export class UserService { 

    private Username = "TEST"; 
    private Password = "Password"; 
    private UserID = 1; 
    private LoggedIn = true; 

    constructor() {} 

    setUser(userObject) { 
     this.Username = userObject.Username; 
     this.Password = userObject.Password; 
     this.UserID = userObject.UserID; 
     this.LoggedIn = userObject.LoggedIn; 
    } 

} 

auch für die vollständige Klarheit, hier ist die Navigation componen t, die die Ansicht geladen wird (einschließlich des SigninComponent) ...

import {Component} from 'angular2/core' 
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router' 
import {UsersListComponent} from './users-list.component' 
import {DashboardComponent} from './dashboard.component' 
import {SigninComponent} from './signin.component' 
import {UserService} from '../services/user-current.service'; 

@Component({ 
    selector: 'nav-top', 
    templateUrl: './app/templates/nav-top.template.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 


@RouteConfig([ 
    {path: '/users', name:'UsersList', component: UsersListComponent}, 
    {path: '/signin', name:'Signin', component: SigninComponent}, 
    {path: '/', name:'Dashboard', component: DashboardComponent, useAsDefault: true} 
]) 

export class NavTopComponent{  
    private CurrentUser;  
    constructor(private userService:UserService) { 
     this.CurrentUser = userService 
    }  
} 

Ich glaube, die Frage der Verwendung von ngOnInit verwandt ist, die nie als console.log() innerhalb der Funktion zu schießen scheint nicht Feuer . Hier ist ein aktualisierter Blick auf den Code, den ich jetzt für die SigninComponent verwende ... Der ngOnInit wird nicht ausgelöst.

import {Component,OnInit} from 'angular2/core' 
import {UserService} from '../services/user-current.service'; 

@Component({ 
    selector: 'SigninComponent', 
    templateUrl: './app/templates/signin.template.html', 
    providers: [UserService] 
}) 

export class SigninComponent implements OnInit{ 

    public CurrentUser; 

    constructor(public userService:UserService) { 
     console.log("constructor"); 
    } 

    ngOnInit() { 
     this.CurrentUser = this.userService; 
     console.log("ngOnInit"); 
    } 

} 

Answer 1

Es gab zwei Teile zu meinem Problem.

Erstens passiert der Konstruktor vor einer Art von Angular2 Life Cycle Sachen, die weit über meiner Gehaltsstufe ist. Im Wesentlichen müssen Sie OnInit und dann OnInit in Ihre exportierte Klasse importieren. Sobald Sie dies getan haben, können Sie die Funktion ngOnInit verwenden.

Zweitens wird diese ngOnInit nur ausgelöst, wenn Ihre Tags in der richtigen Reihenfolge sind. Zum einen ist hier die letzte Komponente Code ...

import {Component,OnInit} from 'angular2/core' 
import {UserService} from '../services/user-current.service'; 

@Component({ 
    selector: 'SigninComponent', 
    templateUrl: './app/templates/signin.template.html', 
    providers: [UserService] 
}) 



export class SigninComponent implements OnInit{ 

    public CurrentUser; 

    constructor(public userService:UserService) { 
     console.log("constructor"); 
    } 

    ngOnInit() { 
     this.CurrentUser = this.userService; 
     console.log("ngOnInit"); 
    } 

} 

Schließlich, hier ist meine Skripte aus der index.html in der Reihenfolge, die ich brauchte es alle Arbeit zu machen ...

<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>  
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="node_modules/angular2/bundles/router.dev.js"></script> 

Dank an alle, die geholfen haben, diese Antwort zu finden. Guthaben sollte zu dir gehen ...