Summary
Let's look at all the operations of the Angular router one more time:
When the browser is loading /inbox/33/messages/44(popup:compose), the router will do the following. First, it will apply redirects. In this example, none of them will be applied, and the URL will stay as is. Then the router will use this URL to construct a new router state:
Next, the router will instantiate the conversation and message components:
Now, let's say the message component has the following link in its template:
<a [routerLink]="[{outlets: {popup: ['message', this.id]}}]">Edit</a>
The router link directive will take the array and will set the href attribute to
/inbox/33/messages/44(popup:message/44). Now, the user triggers a navigation by clicking on the link. The router will take the constructed URL and start the process all over again: it will find that the conversation and message components are already in place. So no work is needed there. But it will create an instance of PopupMessageCmp...
