Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Support Angular 16's new component route data binding

Aberta
#114 5 comentários 2 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
angular, typescript
Domínio
frontend, mobile

Direção de pesquisa

Comece em NativeScriptRouterModule.forRoot e inspecione como a configuração de rotas lida com bindToComponentInputs e com o aviso de outlet. Reproduza o exemplo do Angular 16 com dados de rota e um @Input; o trabalho estará concluído quando o aviso desaparecer e o input do componente contiver os dados da rota durante a inicialização.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
55
Forks
13
Merge médio
16min
PRs com merge (30d)
1

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de NativeScript/angular

Todas as issues de NativeScript/angular

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.