ActivatedRoute paramMap observableが値を2回発射/ 2回発射する - 角度4

Question

角度2/4の問題があり、特定のルートのパラメータを取得しています。私はこれを何百回もしたことがありませんでした。このような問題は決してありませんでした。コードからわかるように、paramMapをルート上で呼び出すと、一度だけ実行されると予想しますが、何とか2回呼び出されます。

paramMap observableは同じ値を1回ではなく2回発光します。問題は、この方法で私は2つの要求を私のサーバーに複製データを送信しているということです。 （：名）

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に応じて、私はデータ（トピック）をフェッチすると同時に、リゾルバを使用してユーザーをフェッチし、それは実際に、何よりものです。

Answer 1

私は解決策を見つけましたので、ここで説明します。私のテンプレート内の二つの要素で非同期私は基本的に（テンプレートの初期化時に）同じ観測可能に二回購読|

問題セッションを有するということです。

<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