访问路由器链接时重新加载组件

时间:2017-09-24 19:15:08

标签: angular angular-ui-router angular-router

每次访问ngOnInIt时我都需要调用routerLink方法,因为我在当前访问过的链接中使用ID来绑定和检索数据库中的数据,如果方法不是我失去了这些数据。

以下是我的init方法示例(抱歉,我不知道如何在此处使用代码段)

ngOnInit() {
    this.authService.getAuth().subscribe(auth=> {
        if(auth) {
            this.loggedInUser = auth.email;
        } else {
        }
    });

    this.teamService.getTeams().subscribe(teams => {
        this.teams = teams;
        console.log(this.teams);
        for(var i = 0; i < this.teams.length; i++) {
            if(this.teams[i].createdBy == this.loggedInUser) {
                this.myTeams.push(this.teams[i]);
            }
        }    
    });

    console.log(this.myTeams);

    this.id = this.route.snapshot.params['id'];

    //Get Team
    this.scrimService.getScrim(this.id).subscribe(scrim => {
        this.scrim = scrim;
    });

}

这是我用来访问这个组件的路由器链接

 <a *ngIf="recordOwner" [routerLink]="['/edit-scrim/'+id]" class="btn btn secondary">Edit</a>

我读了类似问题的一些答案,我可以使用activatedRoute.paramssubscribe来构造函数中的数据,以便在构造函数中调用ngOnInit方法中的所有内容,但我不知道这意味着什么,以及如何在我的方案中完成:/

修改

id: string;
loggedInUser: string;

scrim: Scrim = {
name: '',
game: '',
time: '',
level: '',
description: '',
region: '',
platform: '',
acceptedBy: '',
acceptedDate: '',
acceptedStatus: '',
createdBy: '',
createdDate: '',
team: ''

}

teams: Team[];
myTeams: Team[] = [];
currentDate: string;
currentTime: string;

我有一项服务可以获得&#34;团队&#34;从firebase数据库中返回一个Model数组。我使用当前登录用户的电子邮件地址来查找仅由当前用户创建的团队。一旦我在数组myTeams中有这些团队,我就会尝试使用myTeams列表中的团队名称填充一个select html标记供用户选择。第一次进入这个edit-scrim页面时,select标签中的团队填充得很好,但是如果我移动到另一个页面并使用RouterLink返回到这个edit-scrim页面,则不会填充选择列表,因为它没有&# 39;再次调用ngoninit方法,所以如果我刷新我的网页再次填充团队,我猜是因为再次调用ngoninit。

1 个答案:

答案 0 :(得分:0)

你需要将activatedRoute注入你的构造函数中,

constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.params.subscribe(
params =>{
   this.id = params['id'];
   this.scrimService.getScrim(this.id).subscribe(scrim => {
        this.scrim = scrim;
    });

}
}