<input> Angular2の値で初期化していません

Question

私はAngular2を試していますが、クラスコンストラクタが呼び出されたときに最初にコントローラからの値をHTML入力に取り込むことができませんでした。不思議なことに、ユーザがの後にバインドされたデフォルトデータを入力した場合、ユーザは入力の値を変更しようとします。入力がテキストで事前設定されるようにビューを最初にロードするときに、html入力の値を最初に設定するにはどうすればよいですか？ここで

<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> 

は、コンポーネント（コントローラ）...参照のために

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 
    } 
} 

ある

これは、HTMLテンプレートです...、私はロードサービスが含まれています私はhtmlの入力に表示されたいデータ...

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; 
    } 

} 

完全な明快さのために、ここではナビゲーションコンポーネントです（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 
    }  
} 

私は火の問題は、関数内にconsole.log（）として火に思えることはありませんngOnInitの使用に関連していないと信じて。 SigninComponentに現在使用しているコードを更新しました... ngOnInitは起動しません。

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

私の問題は2つありました。

まず、コンストラクタは、私の給与等級の上にある何らかの種類のAngular2ライフサイクルのものより前に発生します。基本的には、エクスポートされたクラスでOnInitをインポートしてからOnInitを実装する必要があります。これを実行すると、ngOnInit関数を使用できます。

第2に、タグが正しい順序でない限り、このngOnInitは起動しません。まず、ここでは、最終的なコンポーネントのコードがある...

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"); 
    } 

} 

最後には、ここで私はそれをすべて動作させるために必要な順序でのindex.htmlからの私のスクリプト...

<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> 

おかげでありますこの答えを見つけるのを手伝ったすべての人に。信用はあなたに行く必要があります...