Question

我正在使用Angular 2，我遇到了以下问题。

在几个按钮上，我有一个重定向功能，可以移动到另一个页面。

HTML

<button type="button" class="btn btn-primary btn-sm mb-xs" *ngFor="let pl of results;let i=index" (click)="onButtonClick(pl.pl_id)">{{i+1}}</button>

然后在我的组件上我有这些功能：

ngOnInit() {
    this.sub = this._route.params.subscribe(params => {
        this.id = +params['id']; 
    });
    ...
    ...
}

onButtonClick(id) {
    this._router.navigate(['/app/data', id]);        
    this.ngOnInit();
}

我在导航后调用ngOnInit的原因是，如果我没有，则URL会更改，但页面内容保持不变。

因此，问题在于ngOnInit获取前一个网址的参数，而不是navigate之后的参数。

例如，我在网址/app/data/1上，然后点击带有onButtonClick(2)功能的按钮。

网址更改为/app/data/2，但内容来自/app/data/1。如果我再次点击同一个按钮，它会获得正确的内容。所有其他按钮都一样。

我的想法是navigate需要一些时间来更新网址，而ngOnInit更快，并从当前网址而不是新网址获取参数。

有什么想法吗？

修改我从另一个问题中找到了这个答案，但没有解决它：

因此，例如，从/ component / 1导航到/ component / 2，其中url映射到相同的组件（但具有不同的参数）将导致路由器在您实例化Component的实例时导航到/ component / 1，然后在导航到/ component / 2时重新使用该实例。根据您所描述的内容（其中ngOnInit仅被调用一次），似乎这就是您遇到的情况。

对于路由配置，这些是特定组件的模块。如果您需要更多，请告诉我。

export const routes = [
  {path: 'archive', component: archivedContests, pathMatch: 'full', canActivate: [LoggedInGuard]},
  {path: ':id', component: editContest, pathMatch: 'full', canActivate: [LoggedInGuard]},
  {path: '', component: Contests, pathMatch: 'full', canActivate: [LoggedInGuard]}


];

Answer 1

params.map（）

您可以在sysinfo(2)上致电map()。

此外，由于route.params是route.params，所以observable将其分配给Subscription。看看这里：

sub: Subscription;
constructor(private route: ActivatedRoute) {}

ngOnInit() {    
        this.sub = this.route.params
            .map(params => params['id'])
            .subscribe(id => this.id = id);
    }

另一个结果是调用router.navigateByUrl()而不是router.navigate();

在Angular中导航后，URL中的参数错误

1 个答案:

params.map（）