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

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

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

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

1 个答案: