<input />没有在Angular2中初始化值

Question

我正在修改Angular2并且发现我无法在调用类构造函数时使用控制器中的值初始填充html输入。奇怪的是，在用户试图更改输入值之后，输入会填充绑定的默认数据。如何在视图首次加载时初始设置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;
    }

}

这是组件（控制器）......

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

为了便于参考，我已经包含了加载我想要在html输入中显示的数据的服务......

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

}

为了完全清楚，这里是加载视图的导航组件（包括SigninComponent）......

Android NDK: WARNING: Unsupported source file extensions in /Users/MY_MAC_USER/cocos2d/folder-on-mac/MyGameName/frameworks/runtime-src/proj.android/../../cocos2d-x/cocos/scripting/js-bindings/proj.android/Android.mk for module cocos2d_js_static    
Android NDK:   \    
make: Entering directory `/Users/MY_MAC_USER/cocos2d/folder-on-mac/MyGameName/frameworks/runtime-src/proj.android'
make: *** No rule to make target `/home/MY_LINUX_USER/cocos2d/projects/folder_on_linux/MyGameName/frameworks/runtime-src/proj.android/../../cocos2d-x/cocos/scripting/js-bindings/proj.android/../auto/jsb_cocos2dx_3d_auto.cpp', needed by `obj/local/armeabi/objs-debug/cocos2d_js_static/__/auto/jsb_cocos2dx_3d_auto.o'.  Stop.
make: *** Waiting for unfinished jobs....
make: Leaving directory `/Users/MY_MAC_USER/cocos2d/folder-on-mac/MyGameName/frameworks/runtime-src/proj.android'

我认为这个问题与使用ngOnInit有关，因为函数中的console.log（）不会触发，因此似乎永远不会触发。以下是我现在用于SigninComponent的代码的更新外观...... ngOnInit不会触发。

cocos new

Answer 1

我的问题分为两部分。

首先，构造函数发生在某种Angular2生命周期之前，远远高于我的工资等级。实质上，您需要在导出的类中导入OnInit然后实现OnInit。完成此操作后，您可以使用ngOnInit函数。

其次，除非您的标签顺序正确，否则此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>

感谢所有帮助找到这个答案的人。信用应该归你......