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

【问题标题】：ActivatedRoute paramMap observable emits the value twice / firing twice - Angular 4ActivatedRoute paramMap observable 发出两次值/触发两次 - Angular 4
【发布时间】：2018-02-03 19:43:47
【问题描述】：

我在使用 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"));
            });
    }
    .
    .
    .
}

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

【问题讨论】：

嘿，您可以将您的答案发布为答案而不是问题吗？所以接受（甚至鼓励）质量检查风格：发布问题和您自己的答案。这样，这个问题就不会被标记为“未回答”，您可以帮助其他有类似问题的人。
感谢您的提示。我已经按照你的建议做了。

标签： javascript angular observable

【解决方案1】：

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

问题是在我的模板中有两个元素的 session|async 我基本上订阅了两次相同的 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 文档：

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

来源：

Angular - AsyncPipe

【讨论】：