Support Angular 16's new component route data binding

Offen

#114 erstellt am 18.5.2023 5 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 3/5
Geschätzter Aufwand: 1-2 Tage
Anfängerfreundlichkeit: 45/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: angular, typescript
Bereich: frontend, mobile

Rechercherichtung

Beginne bei NativeScriptRouterModule.forRoot und untersuche, wie die Routenkonfiguration bindToComponentInputs und die Warnung für outlet behandelt. Reproduziere das Angular-16-Beispiel mit Routendaten und einem @Input; die Arbeit ist abgeschlossen, wenn die Warnung verschwunden ist und der Component-Input während der Initialisierung die Routendaten enthält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

NativeScript-Angular: 16
Angular: 16

Describe the bug

In angular 16, you can add bindToComponentInputs to Angular's Router Module imports: [NativeScriptRouterModule.forRoot(routes, { bindToComponentInputs: true })], to automatically populate @Input() properties in the component. Doing so in Nativescript—Angular warns the dev
CONSOLE WARN: 'withComponentInputBinding' feature is enabled but this application is using an outlet that may not support binding to component inputs.

To Reproduce

Add bindToComponentInputs: true to the forRoot function's 2nd parameter config object.


import { NgModule } from '@angular/core';

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes, { bindToComponentInputs: true })],
})
export class AppRoutingModule {}

export const testPageRoute: Route = {
  path: ':page',
  component: TestComponent ,
  data: {'test': 'test-text'}
};

import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'test-component',
  templateUrl: './test-component.html',
})
export class TestComponent implements OnInit {
  @Input() public test;

  public ngOnInit(): void {
    console.log(this.test); // should populate with 'test-text'
  }
}

Expected behavior
this.test should populate with the data from the route without having to query in the OnInit lifecycle.

Additional context
https://blog.angular.io/angular-v16-is-here-4d7a28ec680d#398f

Vorherrschende Sprache: TypeScript
Sterne: 55
Forks: 13
Ø Merge: 16 Min.
Gemergte PRs (30 T.): 1

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus NativeScript/angular

Angular 22 compatibility, EventData types are not correctly inferred from templates Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 45/100

NativeScript/angular#170 · 1 Kommentar · Erstellt am 13.6.2026
[iOS] RouterExtensions.back() fails silently after app lock/suspend mid-navigation — component stuck, native back button unresponsive on resume Offen

Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100

NativeScript/angular#164 · Erstellt am 21.4.2026
My types are gone Offen

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 45/100

NativeScript/angular#163 · 1 Kommentar · Erstellt am 21.1.2026
Support for NativeScript v9 sectioned ListView with Angular templates Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 38/100

NativeScript/angular#158 · 1 Reaktion · Erstellt am 27.11.2025
[note] NativeScript v9 will support ES Modules; if @Component uses moduleId, remove it Offen

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 35/100

NativeScript/angular#155 · Erstellt am 15.9.2025

Alle Issues in NativeScript/angular