mirror of
https://github.com/colbymchenry/codegraph.git
synced 2026-10-17 05:07:37 +08:00
feat(angular): a template's event bindings call the component's methods (#2114)
An Angular handler's only caller is its template: `(click)="toggleFavorite()"`,
`(ngSubmit)="submitForm()"`. With no edge, the method showed no callers,
impact stopped at it, and the Steps picture of a screen reached its
handlers only through class containment, with nothing to say what fires
them.
The template pass now reads each `(event)="…"` binding — not
`[(ngModel)]`'s two-way half — and links the component to every method of
its own the statement calls (`save()`, `this.toggle(x)`; not
`closed.emit()` or `form.reset()`), as a `calls` edge
(`synthesizedBy: 'angular-event'`) carrying the binding as
`metadata.trigger`: `{ kind: 'prop', name: '(click)', of: 'button' }`.
The binding is in the template, so it cannot be read back from the source
at the edge's line; Steps now takes a trigger an edge carries before
reading one at the site.
angular-realworld: 21 binding sites → 17 edges (3 repeats of a method and
event, 1 `delete.emit(true)`); Steps for /article/:slug draws
deleteArticle on (click) · <button> → DELETE and back to /, addComment on
(ngSubmit) · <form>, the favorite button's toggle → POST/DELETE or
/register. Ghostfolio 225 edges of 302 sites, ngx-admin 75 of 100 — the
rest are `$event.stopPropagation()`, output emits, assignments and
repeats. Controls (koel, proshop) byte-identical.
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -56,7 +56,10 @@ Angular is the one whose markup is not indexed: a component's template is a
|
||||
which also yields the component tree (`<app-foo>` by element selector) — the
|
||||
edge a navigation in a child component rides to its screen. A `routerLink:`
|
||||
field written in a component's class (a tab bar's or a menu's config, bound
|
||||
in a loop elsewhere) counts as a link from that component. A route with
|
||||
in a loop elsewhere) counts as a link from that component. An event binding
|
||||
(`(click)="save()"`) is a `calls` edge from the component to its own method
|
||||
carrying `metadata.trigger`, which Steps uses in place of reading a trigger
|
||||
at the edge's line (the binding is in the template, not the source there). A route with
|
||||
`children` is a layout: its component carries a `references` edge marked
|
||||
`layout: true` from each screen nested in it, and `routeLayouts` in
|
||||
`route-roots.ts` gives Screens every screen a layout serves. Known limits: a
|
||||
|
||||
Reference in New Issue
Block a user