javascript - 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"));
            });
    }
    .
    .
    .
}

我使用解析器获取用户，同时我根据路由参数 (:name) 获取数据(主题)，仅此而已，仅此而已。

Answer 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 文档:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

来源:

Angular - AsyncPipe