feat(core): add ability to set inputs on ComponentRef (#46641)

pkozlowski-opensource · atscott · commit 96c6139c9ab3 · 2022-07-01T13:45:46.000-07:00
This change adds the setInput method to the ComponentRef. Previously users had to call `componentRef.instance['inputName']` to change inputs of a dynamically created component. This had several problems: * OnPush components were not marked for check and thus very difficult to test; * input aliasing was not take into account - a property name on a component could have been different from the actual input name so setting input properties was fragile; * manually setting input propertie would NOT trigger the `NgOnChanges` lifecycle hook. This modifications unifies `@Input` accross dynamically created components and the ones referenced in templates. This also opens doors to other changes: as an example router could use this new method to set `@Input`s from router params. Closes #12313 Closes #22567 PR Close #46641
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -235,6 +235,7 @@ export abstract class ComponentRef<C> {
     abstract get instance(): C;
     abstract get location(): ElementRef;
     abstract onDestroy(callback: Function): void;
+    abstract setInput(name: string, value: unknown): void;
 }
 
 // @public
diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json
@@ -33,7 +33,7 @@
   "cli-hello-world-lazy": {
     "uncompressed": {
       "runtime": 2835,
-      "main": 236657,
+      "main": 237313,
       "polyfills": 33842,
       "src_app_lazy_lazy_module_ts": 780
     }
@@ -68,4 +68,4 @@
       "bundle": 1214857
     }
   }
-}
+}
diff --git a/packages/core/src/linker/component_factory.ts b/packages/core/src/linker/component_factory.ts
@@ -23,6 +23,16 @@ import {ViewRef} from './view_ref';
  * @publicApi
  */
 export abstract class ComponentRef<C> {
+  /**
+   * Updates a specified input name to a new value. Using this method will properly mark for check
+   * component using the `OnPush` change detection strategy. It will also assure that the
+   * `OnChanges` lifecycle hook runs when a dynamically created component is change-detected.
+   *
+   * @param name The name of an input.
+   * @param value The new value of an input.
+   */
+  abstract setInput(name: string, value: unknown): void;
+
   /**
    * The host or anchor [element](guide/glossary#element) for this component instance.
    */
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -11,7 +11,7 @@ import {Injector} from '../di/injector';
 import {InjectFlags} from '../di/interface/injector';
 import {ProviderToken} from '../di/provider_token';
 import {EnvironmentInjector} from '../di/r3_injector';
-import {RuntimeError, RuntimeErrorCode} from '../errors';
+import {formatRuntimeError, RuntimeError, RuntimeErrorCode} from '../errors';
 import {Type} from '../interface/type';
 import {ComponentFactory as viewEngine_ComponentFactory, ComponentRef as viewEngine_ComponentRef} from '../linker/component_factory';
 import {ComponentFactoryResolver as viewEngine_ComponentFactoryResolver} from '../linker/component_factory_resolver';
@@ -26,16 +26,18 @@ import {assertComponentType} from './assert';
 import {createRootComponent, createRootComponentView, createRootContext, LifecycleHooksFeature} from './component';
 import {getComponentDef} from './definition';
 import {NodeInjector} from './di';
-import {createLView, createTView, locateHostElement, renderView} from './instructions/shared';
+import {reportUnknownPropertyError} from './instructions/element_validation';
+import {createLView, createTView, initializeInputAndOutputAliases, locateHostElement, markDirtyIfOnPush, renderView, setInputsForProperty} from './instructions/shared';
 import {ComponentDef} from './interfaces/definition';
-import {TContainerNode, TElementContainerNode, TElementNode, TNode} from './interfaces/node';
+import {PropertyAliasValue, TContainerNode, TElementContainerNode, TElementNode, TNode} from './interfaces/node';
 import {RNode} from './interfaces/renderer_dom';
-import {HEADER_OFFSET, LView, LViewFlags, TViewType} from './interfaces/view';
+import {HEADER_OFFSET, LView, LViewFlags, TVIEW, TViewType} from './interfaces/view';
 import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces';
 import {createElementNode, writeDirectClass} from './node_manipulation';
 import {extractAttrsAndClassesFromSelector, stringifyCSSSelectorList} from './node_selector_matcher';
 import {enterView, leaveView} from './state';
 import {setUpAttributes} from './util/attrs_utils';
+import {stringifyForError} from './util/stringify_utils';
 import {getTNode} from './util/view_utils';
 import {RootViewRef, ViewRef} from './view_ref';
 
@@ -226,7 +228,6 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
       // Angular 5 reference: https://stackblitz.com/edit/lifecycle-hooks-vcref
       component = createRootComponent(
           componentView, this.componentDef, rootLView, rootContext, [LifecycleHooksFeature]);
-
       renderView(rootTView, rootLView, null);
     } finally {
       leaveView();
@@ -275,6 +276,25 @@ export class ComponentRef<T> extends viewEngine_ComponentRef<T> {
     this.componentType = componentType;
   }
 
+  override setInput(name: string, value: unknown): void {
+    const inputData = this._tNode.inputs;
+    let dataValue: PropertyAliasValue|undefined;
+    if (inputData !== null && (dataValue = inputData[name])) {
+      const lView = this._rootLView;
+      setInputsForProperty(lView[TVIEW], lView, dataValue, name, value);
+      markDirtyIfOnPush(lView, this._tNode.index);
+    } else {
+      if (ngDevMode) {
+        const cmpNameForError = stringifyForError(this.componentType);
+        let message =
+            `Can't set value of the '${name}' input on the '${cmpNameForError}' component. `;
+        message += `Make sure that the '${
+            name}' property is annotated with @Input() or a mapped @Input('${name}') exists.`;
+        reportUnknownPropertyError(message);
+      }
+    }
+  }
+
   override get injector(): Injector {
     return new NodeInjector(this._tNode, this._rootLView);
   }
diff --git a/packages/core/src/render3/instructions/element_validation.ts b/packages/core/src/render3/instructions/element_validation.ts
@@ -207,6 +207,10 @@ export function handleUnknownPropertyError(
     }
   }
 
+  reportUnknownPropertyError(message);
+}
+
+export function reportUnknownPropertyError(message: string) {
   if (shouldThrowErrorOnUnknownProperty) {
     throw new RuntimeError(RuntimeErrorCode.UNKNOWN_BINDING, message);
   } else {
diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
@@ -912,7 +912,7 @@ function generatePropertyAliases(
  * Initializes data structures required to work with directive inputs and outputs.
  * Initialization is done for all directives matched on a given TNode.
  */
-function initializeInputAndOutputAliases(tView: TView, tNode: TNode): void {
+export function initializeInputAndOutputAliases(tView: TView, tNode: TNode): void {
   ngDevMode && assertFirstCreatePass(tView);
 
   const start = tNode.directiveStart;
@@ -1010,7 +1010,7 @@ export function elementPropertyInternal<T>(
 }
 
 /** If node is an OnPush component, marks its LView dirty. */
-function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
+export function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
   ngDevMode && assertLView(lView);
   const childComponentLView = getComponentLViewByIndex(viewIndex, lView);
   if (!(childComponentLView[FLAGS] & LViewFlags.CheckAlways)) {
@@ -1067,6 +1067,7 @@ export function instantiateRootComponent<T>(tView: TView, lView: LView, def: Com
             directiveIndex, rootTNode.directiveStart,
             'Because this is a root component the allocated expando should match the TNode component.');
     configureViewWithDirective(tView, rootTNode, lView, directiveIndex, def);
+    initializeInputAndOutputAliases(tView, rootTNode);
   }
   const directive =
       getNodeInjectable(lView, tView, rootTNode.directiveStart, rootTNode as TElementNode);
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -932,6 +932,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1085,6 +1088,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "maybeWrapInNotSelector"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -698,6 +698,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -965,6 +968,9 @@
   {
     "name": "setInjectImplementation"
   },
+  {
+    "name": "setInputsForProperty"
+  },
   {
     "name": "setInputsFromAttrs"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -1028,6 +1028,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1199,6 +1202,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "markDuplicates"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -992,6 +992,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1160,6 +1163,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "markDuplicates"
   },
diff --git a/packages/core/test/bundling/hello_world/bundle.golden_symbols.json b/packages/core/test/bundling/hello_world/bundle.golden_symbols.json
@@ -398,6 +398,12 @@
   {
     "name": "forwardRef"
   },
+  {
+    "name": "generateInitialInputs"
+  },
+  {
+    "name": "generatePropertyAliases"
+  },
   {
     "name": "getClosureSafeProperty"
   },
@@ -548,6 +554,9 @@
   {
     "name": "isImportedNgModuleProviders"
   },
+  {
+    "name": "isInlineTemplate"
+  },
   {
     "name": "isLContainer"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -1367,6 +1367,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "inject"
   },
@@ -1811,6 +1814,9 @@
   {
     "name": "setInjectImplementation"
   },
+  {
+    "name": "setInputsForProperty"
+  },
   {
     "name": "setInputsFromAttrs"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -473,6 +473,12 @@
   {
     "name": "forwardRef"
   },
+  {
+    "name": "generateInitialInputs"
+  },
+  {
+    "name": "generatePropertyAliases"
+  },
   {
     "name": "getClosureSafeProperty"
   },
@@ -632,6 +638,9 @@
   {
     "name": "isImportedNgModuleProviders"
   },
+  {
+    "name": "isInlineTemplate"
+  },
   {
     "name": "isLContainer"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -866,6 +866,9 @@
   {
     "name": "initTNodeFlags"
   },
+  {
+    "name": "initializeInputAndOutputAliases"
+  },
   {
     "name": "injectArgs"
   },
@@ -1013,6 +1016,9 @@
   {
     "name": "markAsComponentHost"
   },
+  {
+    "name": "markDirtyIfOnPush"
+  },
   {
     "name": "markDuplicates"
   },
diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -235,6 +235,7 @@ export abstract class ComponentRef<C> {`
`235`	`235`	`abstract get instance(): C;`
`236`	`236`	`abstract get location(): ElementRef;`
`237`	`237`	`abstract onDestroy(callback: Function): void;`
	`238`	`+ abstract setInput(name: string, value: unknown): void;`
`238`	`239`	`}`
`239`	`240`
`240`	`241`	`// @public`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`"cli-hello-world-lazy": {`
`34`	`34`	`"uncompressed": {`
`35`	`35`	`"runtime": 2835,`
`36`		`- "main": 236657,`
	`36`	`+ "main": 237313,`
`37`	`37`	`"polyfills": 33842,`
`38`	`38`	`"src_app_lazy_lazy_module_ts": 780`
`39`	`39`	`}`
`@@ -68,4 +68,4 @@`
`68`	`68`	`"bundle": 1214857`
`69`	`69`	`}`
`70`	`70`	`}`
`71`		`-}`
	`71`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -207,6 +207,10 @@ export function handleUnknownPropertyError(`
`207`	`207`	`}`
`208`	`208`	`}`
`209`	`209`
	`210`	`+ reportUnknownPropertyError(message);`
	`211`	`+}`
	`212`	`+`
	`213`	`+export function reportUnknownPropertyError(message: string) {`
`210`	`214`	`if (shouldThrowErrorOnUnknownProperty) {`
`211`	`215`	`throw new RuntimeError(RuntimeErrorCode.UNKNOWN_BINDING, message);`
`212`	`216`	`} else {`
Original file line number	Diff line number	Diff line change
`@@ -932,6 +932,9 @@`
`932`	`932`	`{`
`933`	`933`	`"name": "initTNodeFlags"`
`934`	`934`	`},`
	`935`	`+ {`
	`936`	`+ "name": "initializeInputAndOutputAliases"`
	`937`	`+ },`
`935`	`938`	`{`
`936`	`939`	`"name": "injectArgs"`
`937`	`940`	`},`
`@@ -1085,6 +1088,9 @@`
`1085`	`1088`	`{`
`1086`	`1089`	`"name": "markAsComponentHost"`
`1087`	`1090`	`},`
	`1091`	`+ {`
	`1092`	`+ "name": "markDirtyIfOnPush"`
	`1093`	`+ },`
`1088`	`1094`	`{`
`1089`	`1095`	`"name": "maybeWrapInNotSelector"`
`1090`	`1096`	`},`
Original file line number	Diff line number	Diff line change
`@@ -698,6 +698,9 @@`
`698`	`698`	`{`
`699`	`699`	`"name": "initTNodeFlags"`
`700`	`700`	`},`
	`701`	`+ {`
	`702`	`+ "name": "initializeInputAndOutputAliases"`
	`703`	`+ },`
`701`	`704`	`{`
`702`	`705`	`"name": "injectArgs"`
`703`	`706`	`},`
`@@ -965,6 +968,9 @@`
`965`	`968`	`{`
`966`	`969`	`"name": "setInjectImplementation"`
`967`	`970`	`},`
	`971`	`+ {`
	`972`	`+ "name": "setInputsForProperty"`
	`973`	`+ },`
`968`	`974`	`{`
`969`	`975`	`"name": "setInputsFromAttrs"`
`970`	`976`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1028,6 +1028,9 @@`
`1028`	`1028`	`{`
`1029`	`1029`	`"name": "initTNodeFlags"`
`1030`	`1030`	`},`
	`1031`	`+ {`
	`1032`	`+ "name": "initializeInputAndOutputAliases"`
	`1033`	`+ },`
`1031`	`1034`	`{`
`1032`	`1035`	`"name": "injectArgs"`
`1033`	`1036`	`},`
`@@ -1199,6 +1202,9 @@`
`1199`	`1202`	`{`
`1200`	`1203`	`"name": "markAsComponentHost"`
`1201`	`1204`	`},`
	`1205`	`+ {`
	`1206`	`+ "name": "markDirtyIfOnPush"`
	`1207`	`+ },`
`1202`	`1208`	`{`
`1203`	`1209`	`"name": "markDuplicates"`
`1204`	`1210`	`},`
Original file line number	Diff line number	Diff line change
`@@ -992,6 +992,9 @@`
`992`	`992`	`{`
`993`	`993`	`"name": "initTNodeFlags"`
`994`	`994`	`},`
	`995`	`+ {`
	`996`	`+ "name": "initializeInputAndOutputAliases"`
	`997`	`+ },`
`995`	`998`	`{`
`996`	`999`	`"name": "injectArgs"`
`997`	`1000`	`},`
`@@ -1160,6 +1163,9 @@`
`1160`	`1163`	`{`
`1161`	`1164`	`"name": "markAsComponentHost"`
`1162`	`1165`	`},`
	`1166`	`+ {`
	`1167`	`+ "name": "markDirtyIfOnPush"`
	`1168`	`+ },`
`1163`	`1169`	`{`
`1164`	`1170`	`"name": "markDuplicates"`
`1165`	`1171`	`},`