当 router-link 访问时重新加载组件

Question

我需要在每次访问routerLink时调用ngOnInIt方法，因为我正在使用当前访问的link中的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;
    });

}

这里是路由器-link 我用来访问这个组件

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

我阅读了一些类似问题的答案，我可以使用 activatedRoute.params 和 subscribe 构造函数中的数据，以便在 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;

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

Answer 1

您需要像这样将 activatedRoute 注入构造函数，

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

}
}

当 router-link 访问时重新加载组件

Reload component when router-link visited

angular-ui-router

angular

angular-router