Feature to bind `Router` information to component inputs by atscott · Pull Request #49633 · angular/angular

atscott · 2023-03-29T17:28:28Z

Adds ability for RouterOutlet to bind Router information to the routed
component's inputs. This commit also exposes some helpers for
implementers of custom outlets to do their own input binding if desired.

Resolves #18967

Edit to add some more color to the "required inputs" / no references / no compiler warning for the inputs:

Some router data lives entirely in userspace and isn't known until runtime. This includes path parameters and query parameters. Only static data or resolve items can be known at compilation time.
We considered requiring that bindings be defined in the data or resolve of the Route definitions. However, this would require developers to set the runGuardsAndResolvers option at least to 'pathParamsOrQueryParamsChange'. This was undesirable from a usability and discoverability standpoint.
Required inputs are checked by the template type checking. Because these components are created dynamically by the RouterOutlet, required inputs cannot be checked by the compiler. This is also true of any other component created dynamically.
We also considered yet another property on Route to define what bindings to set on the component. Similar to the point above, this was much more verbose than desired.
There might be some compiler magic we could add to do some level of type checking. However, I feel the Router package should be developed in a way that isn't "special". That is, it's a library that doesn't use any private APIs or integrations that aren't available to any library author. This ensures that the capabilities in the Router can always be replicated in an alternate Routing library driven by the community; I think this is an important property to at least have as a goal for the health of community projects.

GabrielBB · 2023-03-29T20:07:00Z

If you do "find usages" in your IDE you will see nothing and think it can be removed, right ? This would reduce the confidence while doing code cleanups. I wouldn't go this hidden magical path. Spring Boot uses @QueryParam and @PathParam annotations for REST Controllers, maybe you can so @QueryInput and @PathInput ?

atscott · 2023-03-29T20:12:38Z

If you do "find usages" in your IDE you will see nothing and think it can be removed, right ? This would reduce the confidence while doing code cleanups. I wouldn't go this hidden magical path. Why not a @RoutedInput annotation ?

This would still result in the same behavior with typescript not finding references. You can just as easily add a comment or import {Input as RoutedInput} from '@angular/core'.

GabrielBB · 2023-03-29T20:18:49Z

If you do "find usages" in your IDE you will see nothing and think it can be removed, right ? This would reduce the confidence while doing code cleanups. I wouldn't go this hidden magical path. Why not a @RoutedInput annotation ?

This would still result in the same behavior with typescript not finding references. You can just as easily add a comment or import {Input as RoutedInput} from '@angular/core'.

People will miss doing both. Angular, as a framework, should advocate clarity. Because I think clarity brings confidence

eneajaho · 2023-03-29T20:45:50Z

If you do "find usages" in your IDE you will see nothing and think it can be removed, right ? This would reduce the confidence while doing code cleanups. I wouldn't go this hidden magical path. Why not a @RoutedInput annotation ?

This would still result in the same behavior with typescript not finding references. You can just as easily add a comment or import {Input as RoutedInput} from '@angular/core'.

This makes sense! Thanks.

packages/router/test/directives/router_outlet.spec.ts

alxhub

Reviewed-for: public-api

packages/router/src/directives/router_outlet.ts

jessicajaniuk

LGTM

reviewed-for: fw-core, public-api

…puts Adds ability for `RouterOutlet` to bind `Router` information to the routed component's inputs. This commit also exposes some helpers for implementers of custom outlets to do their own input binding if desired. Resolves angular#18967

…of ActivatedRoute The easiest way to access route data is now to use direct bindings to component inputs rather than going through `ActivatedRoute`. The tour of heroes guide still uses `ActivatedRoute` for now. I was hesitant to remove all of the content in one swoop and the tour of heroes is quite a bit more involved.

…nent inputs

…nstead of ActivatedRoute

…nent inputs

github-actions · 2023-03-30T19:03:36Z

Deployed aio for 9a018a4 to: https://ng-dev-previews-fw--pr-angular-angular-49633-dtzgtrva.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

alxhub · 2023-03-30T23:09:53Z

(same existing failures on TAP as other PRs)

angular-robot · 2023-03-30T23:10:57Z

This PR was merged into the repository by commit 81c9dd7.

…of ActivatedRoute (#49633) The easiest way to access route data is now to use direct bindings to component inputs rather than going through `ActivatedRoute`. The tour of heroes guide still uses `ActivatedRoute` for now. I was hesitant to remove all of the content in one swoop and the tour of heroes is quite a bit more involved. PR Close #49633

MunMunMiao · 2023-04-05T21:58:59Z

If you do "find usages" in your IDE you will see nothing and think it can be removed, right ? This would reduce the confidence while doing code cleanups. I wouldn't go this hidden magical path. Why not a @RoutedInput annotation ?

This would still result in the same behavior with typescript not finding references. You can just as easily add a comment or import {Input as RoutedInput} from '@angular/core'.

Previously, 'Input' represented the value passed from the parent component. If the data comes from a Route, decorators such as "RouteParamInput", "RouteQueryInput", and "RouteStaticInput" should be provided to facilitate and strictly distinguish and control the source of the data.

When a sub component needs to pass data from the parent component and also requires query input, it can confuse the developer because they do not know whether the data comes from the parent component or the route.

I know I can set an alias, but it will increase user confusion and increase usage costs.

I think adding new decorators is a better choice.

If the user manually enters a query param on the route, it will cause the value of the Input to be overwritten. At this point, this value is not secure.

like:

I want

@Input() id: Observable<number>

But route is: /user?id=123

@Input() id: // this value is ???

If use RouteQueryInput or RouteParamInput I Know this value is string or undefined

@RouteQueryInput() id?: string
@RouteParamInput() type?: string
@RouteStaticInput() someRouteStaticValue?: unkonw

@atscott

angular-automatic-lock-bot · 2023-05-16T00:08:25Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

atscott added area: router target: minor This PR is targeted for the next minor release labels Mar 29, 2023

ngbot bot modified the milestone: Backlog Mar 29, 2023

pullapprove bot requested review from alxhub, jessicajaniuk and pkozlowski-opensource March 29, 2023 17:28

angular-robot bot added detected: feature PR contains a feature commit area: docs labels Mar 29, 2023

atscott force-pushed the routerInputBindings branch from ebce83c to a957098 Compare March 29, 2023 17:44

tomalaforge reviewed Mar 29, 2023

View reviewed changes

packages/router/test/directives/router_outlet.spec.ts Outdated Show resolved Hide resolved

atscott force-pushed the routerInputBindings branch from a957098 to a70713a Compare March 29, 2023 20:52

alxhub approved these changes Mar 29, 2023

View reviewed changes

packages/router/src/directives/router_outlet.ts Outdated Show resolved Hide resolved

packages/router/src/directives/router_outlet.ts Outdated Show resolved Hide resolved

packages/router/src/directives/router_outlet.ts Outdated Show resolved Hide resolved

atscott force-pushed the routerInputBindings branch 2 times, most recently from 20ddb72 to 31768e4 Compare March 29, 2023 23:03

jessicajaniuk approved these changes Mar 30, 2023

View reviewed changes

jessicajaniuk removed their request for review March 30, 2023 15:28

atscott added 5 commits March 30, 2023 11:52

fixup! feat(router): Opt-in for binding Router information to compo…

d3a8f28

…nent inputs

fixup! docs(router): Update common tasks guide to use input binding i…

7cd12bf

…nstead of ActivatedRoute

fixup! feat(router): Opt-in for binding Router information to compo…

9a018a4

…nent inputs

atscott force-pushed the routerInputBindings branch from 4e85185 to 9a018a4 Compare March 30, 2023 18:52

atscott added the aio: preview label Mar 30, 2023

atscott added the action: merge The PR is ready for merge by the caretaker label Mar 30, 2023

alxhub added the merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note label Mar 30, 2023

angular-robot bot closed this in f982a3f Mar 30, 2023

Timmeeeey mentioned this pull request Apr 11, 2023

Router: withComponentInputBinding feature doesn't work as expected in certain situations #49785

Closed

sergey-morenets mentioned this pull request May 6, 2023

Bind routing inputs feature is not working as expected #50177

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators May 16, 2023

Conversation

atscott commented Mar 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

GabrielBB commented Mar 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

atscott commented Mar 29, 2023

Uh oh!

GabrielBB commented Mar 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eneajaho commented Mar 29, 2023

Uh oh!

Uh oh!

alxhub left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jessicajaniuk left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 30, 2023

Uh oh!

alxhub commented Mar 30, 2023

Uh oh!

angular-robot bot commented Mar 30, 2023

Uh oh!

MunMunMiao commented Apr 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

angular-automatic-lock-bot bot commented May 16, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

atscott commented Mar 29, 2023 •

edited

Loading

GabrielBB commented Mar 29, 2023 •

edited

Loading

GabrielBB commented Mar 29, 2023 •

edited

Loading

MunMunMiao commented Apr 5, 2023 •

edited

Loading