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;
        }
    }
}

当用户刷新浏览器window时，第一个路由初始化（/user/profile）与elseblock.But工作正常我再次向服务器发出请求并让用户返回并呈现我的 html 组件（if(!user) 块）。这里是 html view

<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 调用获取用户）。问题是当我在完成 init 方法之前先在页面刷新上呈现我的 UserComponent userComponent 它将导航到 AppComponent init 方法，紧接着 user.component.html 将在没有用户数据说 Cannot read property 'name' of undefined 的情况下崩溃。然后它将再次重定向到 UserComponent 的 onInit，但此时用户 html已经渲染和 carshed。

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

提前致谢..

Answer 1

这个呢？用户进入后显示表单。 <fieldset *ngIf="user">

Answer 2

您可以将 <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，因此只有当您的 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

oninit 之前的 angular2 渲染组件

angular2 render component before oninit

page-refresh

angular2-routing

angular