在Angular2中无法初始化值。

40 浏览
0 Comments

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

0
0 Comments

问题的原因是,构造函数在某种Angular2生命周期之前发生,需要在导出的类中导入OnInit并实现OnInit。使用ngOnInit函数来解决这个问题。另外,ngOnInit只有在标签的正确顺序下才会触发。

解决方法是,首先在组件代码中导入OnInit,然后在导出的类中实现OnInit。然后在ngOnInit函数中将CurrentUser设置为userService的值。在index.html中按照正确的顺序引入所需的脚本文件。感谢所有帮助找到这个答案的人。

0