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

Question

我在 Angular 2/4 和获取特定路线的参数时遇到问题。我这样做了数百次，但从未遇到过这样的问题，正如您从我在路线上调用 paramMap 的代码中看到的那样，预计它只会运行一次，但不知何故它最终被调用两次。

这就像 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"));
            });
    }
    .
    .
    .
}

我使用解析器获取用户，同时根据路由参数（：名称）获取数据（主题），实际上就是这样，仅此而已。

Answer 1

好的，我已经找到了解决方案，所以我将其放在这里。

问题是，在模板中使用session|async与两个元素，我基本上订阅了同一个可观察对象两次（在模板初始化时）。

<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 文档：

异步管道订阅 Observable 或 Promise 并返回其发出的最新值。当发出新值时，异步管道会标记要检查更改的组件。当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。

来源：

Angular-AsyncPipe