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