Navigation can reuse a component while route parameters change. Subscribe or react to the parameter source when the displayed entity follows the URL.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: Navigating from one user ID to another may require a new request without a new component constructor. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Observe URL changes
A reused component may receive a new user ID without running its constructor again. Use the parameter stream as the source.
Step 2: Replace obsolete requests
Map IDs to requests with switchMap when only the latest entity should be displayed. Capture errors within the intended stream lifetime.
Step 3: Release component ownership
Use lifecycle-aware teardown so navigation away stops long-lived subscription work. Server-side writes still require independent consistency rules.
Worked scenario
Navigating from one user ID to another may require a new request without a new component constructor.
Navigate from /users/1 to /users/2 while the first read is slow. A one-time snapshot leaves user 1 selected; a parameter-driven pipeline starts user 2’s request and replaces the earlier read subscription. Show loading for the selected ID and prevent a late result from presenting the wrong entity.
Common mistake
Reading a snapshot once can retain the previous entity.
Verify the behavior
Control responses so user 1 completes last. Confirm only user 2 is shown, and emit parameter changes after destruction to verify teardown.
Interview exercise
Cancel obsolete route requests.
Answer and reasoning
Map parameter changes to requests with switchMap, handle expected errors and release the subscription with component lifetime.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.