oninit之前的angular2渲染組件

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塊進行第一個路由初始化（/ user / profile）的效果很好。但是當用戶刷新瀏覽器窗口時，我再次向服務器發出了一個請求，並讓用戶返回並渲染了我的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內執行相同的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>

還有另一種方法可以在路由中使用resolve，因此只有完成解析后，才會啟動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">