2017-08-25 113 views
1

我遇到了Angular 2/4的问题,并且获取了特定路由的参数。我这样做了几百次,并且从来没有像这样的问题,正如你从代码中看到的那样,我会在期望它只运行一次的路由上调用paramMap,但不知何故它最终会被调用两次。ActivatedRoute paramMap observable发射值两次/触发两次 - Angular 4

这就像paramMap observable发出两次相同的值而不是一次。问题是,这样我向我的服务器发送两个请求,发送重复的数据。 (:名称)

export class UserComponent implements OnInit { 
    user: User; 
    submitted: Observable<Topic[]>; 

    constructor(
     private router: Router, 
     private route: ActivatedRoute, 
     private service: UserService, 
     private topicService: TopicService 
    ) {} 

    ngOnInit(): void {   
     this.route.data 
      .subscribe(res => this.user = res.user); 
     // Error is handled by resolver 

     this.submitted = this.route.paramMap 
      .switchMap((params: ParamMap) => { 
       // THIS ONE IS INVOKED TWICE WITH SAME PARAMS 
       return this.topicService 
        .getUserSubmitted(params.get("name")); 
      }); 
    } 
    . 
    . 
    . 
} 

我根据路线PARAM提取采用了旋转变压器的用户,同时我获取数据(主题),并且实际上它,仅此而已。

+1

嘿,你可以发布你的答案的答案,而不是一个问题吗? SO认同(甚至鼓励)QA风格:发布一个问题和你自己的答案。这样,这个问题就不会被标记为“未答复”,并且你可以帮助其他有类似问题的人。 –

+0

谢谢你的提示。我已经完成了你的建议。 – Serjuice

回答

1

好的,我找到了解决方案,所以我把它放在这里。

问题是有会话|异步与我的模板中的两个元素我基本上订阅两次相同的observable(在模板初始化时)。

<div *ngFor="let submit of submitted|async" class="submits">...</div> 

<!-- and one more --> 

<em *ngIf="!(submitted|async)?.length"> 
    Nothing to show. User has not submitted any topics. 
</em> 

Angular.io文档:

异步管订阅了可观察到的或承诺并返回它已发出的最新的值。发出新值时,异步管道会标记要检查更改的组件。当组件被破坏时,异步管道会自动取消订阅,以避免潜在的内存泄漏。

来源:

Angular - AsyncPipe