Support Angular 16's new component route data binding

Abierto

#114 abierto el 18/5/2023 5 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad: 3/5
Tiempo estimado: 1-2 días
Aptitud para principiantes: 45/100

Tipo de issue: Error
Claridad: Bastante claro
Estado de actividad: Estancado
Stack tecnológico: angular, typescript
Área: frontend, mobile

Línea de trabajo

Comienza en NativeScriptRouterModule.forRoot e inspecciona cómo su configuración de rutas gestiona bindToComponentInputs y la advertencia de outlet. Reproduce el ejemplo de Angular 16 con datos de ruta y un @Input; el trabajo estará terminado cuando la advertencia desaparezca y el input del componente contenga los datos de la ruta durante la inicialización.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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