fix(router): RouterLinkActive should update its state right after che…

[vsavkin]

…cking the children

Closes #18983

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number:18983

What is the new behavior?

In general, directives depending on their children break the change detection data flow, unless they do it only to update the DOM. This is what RouterLinkActive used to do--it only updated the DOM. Adding exportAs to it made it problematic. Now this directive's state depends on the children, and the state is exposed to other directives. This is why there are so many issues with it.

I fixed the directive the same we do it everywhere else: I moved the behavior that breaks the data flow into a promise (we already had a promise before--but it wasn't working properly. we should never update the state after we update the dom. The dom should reflect the state).

There are other ways to solve this problem without breaking the change detection data flow (e.g., defining a separate pipe for that), but they are breaking.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[tbosch]

Note: This looked good on a global presubmit, but was reverted because it was synced with another change that had to be reverted.

[cexbrayat]

@vsavkin @tbosch Looks like this change breaks unit tests, as this adds the necessity of an extra tick(), like Victor did in integration.spec.ts. Maybe it's worth mentioning in the changelog?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}