Support Angular 16's new component route data binding
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- angular, typescript
调研方向
从 NativeScriptRouterModule.forRoot 开始,检查其路由配置如何处理 bindToComponentInputs 和 outlet 警告。使用路由数据和一个 @Input 重现 Angular 16 示例;当警告消失且组件 input 在初始化期间包含路由数据时,工作就完成了。
由索引模型根据 Issue 内容生成。
描述
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
- 主要语言
- TypeScript
- 星标
- 55
- 派生
- 13
- 平均合并
- 16 分钟
- 30 天内合并 PR
- 1
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
NativeScript/angular 的其他 Issue
-
难度 4/5 3-5 天 新手友好度 45/100
NativeScript/angular#170 · 1 条评论 ·
-
难度 5/5 一周以上 新手友好度 35/100
NativeScript/angular#164 ·
-
难度 2/5 1-3 小时 新手友好度 45/100
NativeScript/angular#163 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 38/100
NativeScript/angular#158 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 35/100
NativeScript/angular#155 ·
查看 NativeScript/angular 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
-
area:tools bug good first issue help wanted priority:P2
难度 2/5 1-3 小时 新手友好度 90/100
TaewoooPark/Motifcode#14 ·
-
bug
难度 2/5 1-3 小时 新手友好度 84/100
newrelic-experimental/preflight#793 · 1 条评论 ·
-
bug 🐞
难度 2/5 1-3 小时 新手友好度 68/100
-
[Bounty proposal] fix(web): memory insights count an evening memory on the next day ($25 proposed) 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
BasedHardware/omi#15320 ·