feat(compiler): allow multiple exportAs names (#18723)

This change allows users to specify multiple exportAs names for a
directive by giving a comma-delimited list inside the string.

The primary motivation for this change is to allow these names to be
changed in a backwards compatible way.

PR Close #18723

packages/core/test/linker/integration_spec.ts

@@ -469,6 +469,20 @@ function declareTests({useJit}: {useJit: boolean}) {
               .toBeAnInstanceOf(ExportDir);
         });
 
+        it('should assign a directive to a ref when it has multiple exportAs names', () => {
+          TestBed.configureTestingModule(
+              {declarations: [MyComp, DirectiveWithMultipleExportAsNames]});
+
+          const template = '<div multiple-export-as #x="dirX" #y="dirY"></div>';
+          TestBed.overrideComponent(MyComp, {set: {template}});
+
+          const fixture = TestBed.createComponent(MyComp);
+          expect(fixture.debugElement.children[0].references !['x'])
+              .toBeAnInstanceOf(DirectiveWithMultipleExportAsNames);
+          expect(fixture.debugElement.children[0].references !['y'])
+              .toBeAnInstanceOf(DirectiveWithMultipleExportAsNames);
+        });
+
         it('should make the assigned component accessible in property bindings, even if they were declared before the component',
            () => {
              TestBed.configureTestingModule({declarations: [MyComp, ChildComp]});
@@ -2398,6 +2412,10 @@ class SomeImperativeViewport {
 class ExportDir {
 }
 
+@Directive({selector: '[multiple-export-as]', exportAs: 'dirX, dirY'})
+export class DirectiveWithMultipleExportAsNames {
+}
+
 @Component({selector: 'comp'})
 class ComponentWithoutView {
 }