angular2的OnInit

Question

我有以下代码之前呈现组件网页摘要

import { Component, OnInit } from "@angular/core"; 
import { AuthenticationService } from "../shared/services/authentication.service"; 
import { User } from "./user"; 
import { UserService } from "./user.service"; 

@Component({ 
    templateUrl:'./user.component.html' 
}) 
export class UserComponent implements OnInit{ 
    user: User; 

    constructor(
     private _userService: UserService, 
     private _authService:AuthenticationService){ 
    } 

    ngOnInit(){ 

     let user = this._userService.getUser(); 

     if(!user){ 
      this._authService.getLoggedUser().subscribe(
       user => { 
        this.user = user; 
        this._userService.setLoggedUser(user); 
       } 
      ); 

      this._userService._loggedUser$.subscribe(
       user => { 
        this.user = user; 
       } 
      ) 
     }else{ 
      this.user = user; 
     } 
    } 
} 

这与else block.But工作正常与第一路线初始化（/用户/配置文件）当用户刷新浏览器窗口我提出的要求再次到服务器并得到用户的背部和渲染我的HTML组件（if(!user)块）。这里是HTML视图

<form> 
     <fieldset> 
      <legend>Profile</legend> 
      <div class="form-group"> 
       <label>Name</label> 
       <input name="name" type="text" class="form-control" [(ngModel)]="user.name"> 
      </div> 
      <div class="form-group"> 
       <label>Mobile</label> 
       <input name="mobile" type="text" class="form-control" [(ngModel)]="user.mobileNumber"> 
      </div> 
      <div class="form-group"> 
       <label>Password</label> 
       <input name="password" type="password" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <label>Email</label> 
       <input name="email" type="text" class="form-control" [(ngModel)]="user.email" disabled> 
      </div> 
     </fieldset> 
    </form> 

和我有AppComponent，它会做同样的内onInit（如果不存在，则通过http调用获取用户）。问题是，当我在完成userComponent的init方法之前首先呈现我的UserComponent页面刷新时，它将导航到AppComponent init方法，之后user.component.html会在没有用户数据的情况下崩溃Cannot read property 'name' of undefined 。并且它会重定向到UserComponent的onInit，但是此时用户html已经渲染并显示。

我该如何解决这种情况，并且有没有最好的方法来处理这种情况？

在此先感谢..

Answer 1

你可以把你<form>内<div *ngIf="user">..</div>和此元件只加载，一旦你有你的用户里面的一些价值观。所以你不会得到那个错误。

<div *ngIf="user"> 
    <form> <fieldset> 
      <legend>Profile</legend> 
      <div class="form-group"> 
       <label>Name</label> 
       <input name="name" type="text" class="form-control" [(ngModel)]="user.name"> 
      </div> 
      ............. 
      ............. 
    </form> 
</div> 

还有一个你所以只有当你决心做那么只有user.component将开始在您的路线使用的决心的方式。

export const AppRoutes: Routes = [ 
    ... 
    { 
    path: 'contact/:id', 
    component: ContactsDetailComponent, 
    resolve: { 
     contact: 'contact' 
    } 
    } 
]; 

从这里读到决心http://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

Answer 2

这是怎么回事？显示形式，一旦用户在。 <fieldset *ngIf="user">