NativeScript / NativeScript/angular
Support Angular 16's new component route data binding
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 55
- 派生
- 13
- 平均合并
- 16 分钟
- 30 天内合并 PR
- 1
描述
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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 NativeScriptRouterModule.forRoot 开始,检查其路由配置如何处理 bindToComponentInputs 和 outlet 警告。使用路由数据和一个 @Input 重现 Angular 16 示例;当警告消失且组件 input 在初始化期间包含路由数据时,工作就完成了。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100