fix(core): components marked for traversal resets reactive context #61663
Conversation
0662b7f to
cbd8381
Compare
cbd8381 to
5283e46
Compare
There was a problem hiding this comment.
This is correct in isolation.
(TMI disclaimer) I'm still not sure about how I feel about the attached view case in general. It wasn't the intent that attaching a view would skip refreshing the component. Skipping it will result in its queries not being updated. E.g. if I add a test like this:
@Directive({
selector: '[step]'
})
class Step {}
@Directive({selector: '[dataDirective]'})
class DataDirective {
readonly templateRef = inject(TemplateRef);
readonly viewContainerRef = inject(ViewContainerRef);
drawTemplate() {
this.viewContainerRef.createEmbeddedView(this.templateRef, {$implicit: data});
}
}
@Component({
selector: 'child',
template: '<ng-container *dataDirective="let data"><div step> {{data()}}</div></ng-container>',
imports: [DataDirective, Step],
changeDetection: ChangeDetectionStrategy.OnPush,
})
class ChildComponent {
@ViewChildren(Step) steps?: QueryList<Step>;
signalSteps = viewChildren(DataDirective);
}
...
The length of steps and signalSteps should really both be 1 after you call drawTemplate and wait for stability, but it's not because view queries are updated at the end of refreshing the component view:
angular/packages/core/src/render3/instructions/change_detection.ts
Lines 299 to 302 in c11527f
This is one of the reasons we ensure that embedded views share consumers with their parent component and why the temporary consumer marks the component view for refresh. The "correct" thing to do for this case would be to ensure that the component gets refreshed when an embedded view is attached but that comes with its own difficulties. There are similar problems with the old style queries that aren't necessarily solvable and we can kind of shrug and say to use signal queries to fix those problems.
This issue already exists and again the change here is still correct and doesn't introduce any regression. But I think it's worth noting that this "fixes" the issue in a way that's not necessarily directly addressing the problem with the attached view not marking its parent OnPush component for check.
| } | ||
| if (!isInCheckNoChangesPass) { | ||
| addAfterRenderSequencesForView(lView); | ||
| // Sets active consumer to null, ensuring that an improper reactive context is not inherited |
There was a problem hiding this comment.
| // Sets active consumer to null, ensuring that an improper reactive context is not inherited | |
| // Set active consumer to null to avoid inheriting an improper reactive context |
optional: Slight restructure to active voice and remove double negative. I think it's a bit easier to read this way but not needed.
| if (!isInCheckNoChangesPass) { | ||
| addAfterRenderSequencesForView(lView); | ||
| // Sets active consumer to null, ensuring that an improper reactive context is not inherited | ||
| const prevConsumer = setActiveConsumer(null); |
There was a problem hiding this comment.
I can't comment on unchanged lines, but in refreshView, we should also update the comment that explains when getActiveConsumer() === null. There are now more situations where the consumer is null than the viewContainerRef.createEmbeddedView(...).detectChanges() edge case. That's absolutely correct -- we just need to update the comment.
There was a problem hiding this comment.
Updated. Just like to add that getActiveConsumer() === null would already be the case if you take my original bug report and add OnPush change detection to the ParentComponent
| @@ -838,6 +840,51 @@ describe('Angular with scheduler and ZoneJS', () => { | |||
| expect(fixture.nativeElement.innerText).toContain('new'); | |||
| }); | |||
|
|
|||
| it('updating signal inside an EmbeddedView in a child component with OnPush inside a parent component with Default CD', async () => { | |||
There was a problem hiding this comment.
I think this test would be better in core/test/acceptance/change_detection_spec.ts, maybe under the describe('embedded views', ... or describe('OnPush', ...
There was a problem hiding this comment.
Moved the test. Also updated the tests in describe('embedded views', ... to use standalone syntax while I was at it
There was a problem hiding this comment.
I'm also not entirely satisfied with the test name. It feels a bit long, and it does not even convey that the child component has to be only marked for traversal and not dirty. Not sure if best practice in this repo is to have a long test name or add a comment to the test. I'll take your suggestion If you have any.
There was a problem hiding this comment.
how about "does not inherit reactive consumer from ancestor when attached to non-dirty parent"?
Edit: That's pretty implementation-specific but I don't know what else to put. Maybe something along those lines but slightly different...
update tests to use standalone components for easier test setup
when an embedded view is inside a component with OnPush who has a parent with Default CD, then the embedded view is not updated when a signal in its template is changed relates to angular#61662
when marked for traversal the reactive context has to be set to null to avoid inheriting the reactive context of the parent component PR Closes angular#61662
5283e46 to
89de2d7
Compare
when marked for traversal the reactive context has to be set to null to avoid inheriting the reactive context of the parent component
PR Closes #61662
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #61662
What is the new behavior?
The embedded view updates its template when it depends on a signal which has changed its value.
Does this PR introduce a breaking change?
Other information