fix(style): apply correct flex with ngStyle and layout change

[Teamop]

Fix #700
For this issue, I found that the flex is initialized to '1 1 0%', when the layout changes, the layout event triggers before ngStyle, so invokes _updateStyle to apply this initialization to the ngStyleBase. Then for the following ngStyle.lt-md event, just merge this base style.

So the change is: when the input changes in the StyleDirective, check the base style, if it's not same with the current style, replace it with the current style and for others which have been merged with ngStyleBase, delete the corresponding style and merge again.

In the following test cases, the first case is just like the scenario in the #700

[praveeno]

a hyperlink of issue is more useful perhaps,

[Teamop]

Hi @praveeno , I just follow the ones in flex

[praveeno]

In my perspective, it leads confusion

[CaerusKaru]

@Teamop this was a really great effort to track down this issue, but ultimately a lot of this is unnecessary. The real root of the problem (which, granted, was really tricky to find), was that the ngIf on the element was throwing off the directive lifecycles. There was some logic in FlexDirective that was too eager in initializing, thus using the default flex value instead of the real input.

All of this is encapsulated in #771, and I have taken the liberty of using your unit tests to confirm the behavior. Thank you again for your great work on this issue.

[Teamop]

thanks @CaerusKaru . When I tried to find this issue, I thought about the lifecycle issue once, but I missed it finally 😭 . Your solution is much better.

[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.}