Как получить контекст элемента списка, к которому прикоснулись, чтобы показать детали на другой странице в Nativescript TS

Question

Я пытаюсь показать данные из списка жестко запрограммированных массивов для элемента, который коснулся, на другой странице. Я пытался сделать обязательный контекст, но он не работает для меня, пожалуйста, помогите мне.

home.component.html

<ListView class="list-group" [items]="asmaulhusna" (itemTap)="onItemTap($event)">
    <ng-template let-asmaulhusna="item">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <GridLayout columns="*, *">
                <Label [text]="asmaulhusna.name" col="1" class="list-group-item-heading title rtl"
                    verticalAlignment="center"></Label>
                <StackLayout orientation="vertical" col="0">
                    <Label [text]="asmaulhusna.subtitle" class="list-group-item-heading sub-title"
                        verticalAlignment="center"></Label>
                    <Label [text]="asmaulhusna.description" class="list-group-item-heading description"
                        verticalAlignment="center"></Label>
                </StackLayout>
            </GridLayout>
        </FlexboxLayout>
    </ng-template>
</ListView>

home.component.ts

import { ItemEventData } from "tns-core-modules/ui/list-view"
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { Router, NavigationExtras } from "@angular/router";

export class HomeComponent implements OnInit {
    asmaulhusna: { name: string, subtitle: string, description: string }[] = [
        { name: "Title name", subtitle: "easy", description: "adf", },
    ];


    public constructor(
        public routerextensions: RouterExtensions
    ) { }

    onItemTap(args): void {
        this.routerextensions.navigate(["detail"],args);
    }

    ngOnInit(): void {
    }
}

detail.component.html

<ScrollView class="page">
    <StackLayout class="home-panel">
        <Label [text]="asmaulhusna.name"></Label>
    </StackLayout>
</ScrollView>

Answer 1

Поскольку вы используете Angular, попробуйте Angular способ обработки данных. Может быть, вы можете поместить список элементов в службу, получить список элементов из этой службы, чтобы загрузить представление списка. В компоненте detail используйте параметр id из вашего маршрутизатора, какой бы элемент из массива в сервисе не совпадал с заданным идентификатором, загрузите его на экране. Вы найдете точно такой же пример кода, если обратитесь к шаблону Hello World Angular.

onItemTap(args): void {
  const listItem = args.view.bindingContext;
  console.log(listItem.name);
  // Assuming you have a unique id for each item
  this.routerextensions.navigate(["/detail", listItem.id]);
}