ActivatedRoute paramMap observable发射值两次/触发两次 - Angular 4

问题描述：

我遇到了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提取采用了旋转变压器的用户，同时我获取数据（主题），并且实际上它，仅此而已。

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

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

答

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

问题是有会话|异步与我的模板中的两个元素我基本上订阅两次相同的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

ActivatedRoute paramMap observable发射值两次/触发两次 - Angular 4

相关推荐