Support Angular 16's new component route data binding

Đang mở

#114 mở ngày 18/5/2023 5 bình luận 2 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó: 3/5
Thời gian dự kiến: 1-2 ngày
Mức phù hợp với người mới: 45/100

Loại issue: Lỗi
Độ rõ ràng: Khá rõ ràng
Mức độ hoạt động: Đình trệ
Công nghệ: angular, typescript
Lĩnh vực: frontend, mobile

Hướng nghiên cứu

Bắt đầu tại NativeScriptRouterModule.forRoot và kiểm tra cách cấu hình route của nó xử lý bindToComponentInputs và cảnh báo về outlet. Tái hiện ví dụ Angular 16 với dữ liệu route và một @Input; công việc hoàn tất khi cảnh báo biến mất và input của component chứa dữ liệu route trong quá trình khởi tạo.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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