我有以下代码片段
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 的第一个路由初始化(/user/profile)时工作正常。但是当用户刷新浏览器窗口时,我再次向服务器发出请求并且让用户回来并呈现我的 html 组件(if(!user)
block )。这是 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 调用获取用户)。问题是当我在完成初始化之前首先在页面刷新上呈现我的 UserComponent userComponent 的方法它将导航到 AppComponent init 方法,紧接着 user.component.html
将崩溃而没有用户数据说 Cannot read property 'name' of undefined
.and again它将重定向到 UserComponent 的 onInit,但此时用户 html 已经呈现和 carshed。
我该如何解决这种情况?是否有处理这种情况的最佳方法?
提前致谢..
最佳答案
你可以把你的<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 渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41309675/