NativeScript / NativeScript/angular
Support Angular 16's new component route data binding
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 55
- Forks
- 13
- Ø Merge
- 16 Min.
- Gemergte PRs (30 T.)
- 1
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
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.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend, mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100