diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e72d99fb..0e248534e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Fixed error when importing `once` without context (#664) - Fixed issue with monorepos using Rush (#667) - Fixed issue with blocked port in case of full debug reload (#671) +- Fixed `@Inject` with multiple instances in `piral-ng` (#673) - Removed legacy option in `piral-cli-webpack5` to support IE8 - Removed pilet-related options in debug settings when running `piral debug` (#670) - Improved internal navigation Blazor pilets using `piral-blazor` diff --git a/src/converters/piral-ng/README.md b/src/converters/piral-ng/README.md index 7541d5da6..5d3137aaf 100644 --- a/src/converters/piral-ng/README.md +++ b/src/converters/piral-ng/README.md @@ -363,6 +363,8 @@ Depending on your Angular needs you'd want to share more packages. Depending on the mounted component different services are injected. the following table lists the names of the injected services per component type. +**Important**: These are all meant as constructor injectors. As injected services are always singletons in Angular you will *never* receive a changed value on them. Therefore, only use these values in the constructor and **don't** capture them. You might capture / store values *inside* the props (e.g., `props.params`), but don't capture the injected props. Instead, use `@Input` (see next section) if you need to continuously monitor the props. + | Component | Props | Piral | Context | |-----------|---------|---------|-----------| | Tile | `Props` | `piral` | `Context` | @@ -379,12 +381,15 @@ The following code snippet illustrates the injection of the `Props` service from @Component({ template: `
-

{{ props.rows }} rows and {{ props.columns }} columns

+

{{ rows }} rows and {{ cols }} columns

`, }) export class SampleTileComponent { - constructor(@Inject('Props') public props: TileComponentProps) {} + constructor(@Inject('Props') props: TileComponentProps) { + this.rows = props.rows; + this.cols = props.columns; + } } ``` diff --git a/src/converters/piral-ng/src/module.ts b/src/converters/piral-ng/src/module.ts index fb76e63f4..2e3e73f39 100644 --- a/src/converters/piral-ng/src/module.ts +++ b/src/converters/piral-ng/src/module.ts @@ -30,10 +30,16 @@ const availableModules: Array = []; function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) { const { module, components } = moduleDef; const imports = [BrowserModule, SharedModule, module]; - const props = { current: undefined as BehaviorSubject }; + const props = { current: undefined }; + const createProxy = () => + new Proxy(props.current, { + get(_, name) { + return props.current[name]; + }, + }); const providers = [ RoutingService, - { provide: 'Props', useFactory: () => props.current.value, deps: [] }, + { provide: 'Props', useFactory: createProxy, deps: [] }, { provide: 'piral', useFactory: () => piral, deps: [] }, ]; @@ -60,7 +66,7 @@ function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) { attach(component: any, node: HTMLElement, $props: BehaviorSubject) { const factory = this.resolver.resolveComponentFactory(component); - props.current = $props; + props.current = $props.value; if (factory) { const ref = this.zone.run(() => this.appRef.bootstrap(factory, node));