在Angular2中无法初始化值。
在Angular2中无法初始化值。
我正在尝试使用Angular2,并发现当调用类的构造函数时,我无法将控制器中的值初始化到html输入框中。奇怪的是,当用户试图更改输入框的值后,输入框才会填充绑定的默认数据。我该如何在视图首次加载时初始化html输入框的值,以便输入框预填充文本?
这是HTML模板...
用户名: 密码:
这是组件(控制器)...
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输入框中显示的数据的服务...
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 } }
我认为问题与ngOnInit的使用有关,因为该函数中的console.log()没有触发。这是我现在用于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"); } }