fix(ivy): ensure NgClass does not overwrite other dir data (#31788)

We currently have a handwritten version of the Ivy directive def for NgClass so
we can switch between Ivy and View Engine behavior. This generated code needs to
be kept up-to-date with what the Ivy compiler generates.

PR 30742 recently changed `classMap` such that it now requires allocation of
host binding slots. This means that the `allocHostVars()` function must be
called in the NgClass directive def to match compiler output, but the
handwritten directive def was not updated. This caused a bug where NgClass
was inappropriately overwriting data for other directives because space was
not allocated for its values.

PR Close #31788

packages/core/test/acceptance/styling_spec.ts

@@ -8,7 +8,7 @@
 import {Component, Directive, ElementRef, Input} from '@angular/core';
 import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode';
 import {TestBed} from '@angular/core/testing';
-import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
+import {By, DomSanitizer, SafeStyle} from '@angular/platform-browser';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {ivyEnabled, onlyInIvy} from '@angular/private/testing';
 
@@ -554,4 +554,54 @@ describe('styling', () => {
             expect(capturedMyClassBindingCount).toEqual(1);
             expect(capturedMyClassBindingValue !).toEqual('foo');
           });
+
+  describe('NgClass', () => {
+
+    // We had a bug where NgClass would not allocate sufficient slots for host bindings,
+    // so it would overwrite information about other directives nearby. This test checks
+    // that TestDir's injector is not overwritten by NgClass, so TestDir should still
+    // be found by DI when ChildDir is instantiated.
+    it('should not overwrite other directive info when using NgClass', () => {
+      @Directive({selector: '[test-dir]'})
+      class TestDir {
+      }
+
+      @Directive({selector: '[child-dir]'})
+      class ChildDir {
+        constructor(public parent: TestDir) {}
+      }
+
+      @Component({
+        selector: 'app',
+        template: `
+          <div class="my-class" [ngClass]="classMap" test-dir>
+            <div *ngIf="showing" child-dir>Hello</div>
+          </div>
+        `
+      })
+      class AppComponent {
+        classMap = {'with-button': true};
+        showing = false;
+      }
+
+      TestBed.configureTestingModule({declarations: [AppComponent, TestDir, ChildDir]});
+      const fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
+      const testDirDiv = fixture.debugElement.nativeElement.querySelector('div');
+      expect(testDirDiv.classList).toContain('with-button');
+      expect(fixture.debugElement.nativeElement.textContent).not.toContain('Hello');
+
+      fixture.componentInstance.classMap = {'with-button': false};
+      fixture.componentInstance.showing = true;
+      fixture.detectChanges();
+
+      const childDir = fixture.debugElement.query(By.directive(ChildDir)).injector.get(ChildDir);
+      expect(childDir.parent).toBeAnInstanceOf(TestDir);
+      expect(testDirDiv.classList).not.toContain('with-button');
+      expect(fixture.debugElement.nativeElement.textContent).toContain('Hello');
+
+    });
+
+
+  });
 });