Nativescript：如何创建 Angular 类似 routerlink 的行为

Question

现在我有这个组件，它是一个搜索功能组件：

这是它的代码：

<StackLayout>
    <StackLayout class="form">
        <StackLayout class="input-field">
            <TextField hint="Tournament Name" [(ngModel)]="query"></TextField>
        </StackLayout>
        <Button text="Search" (tap)="onSubmit()"></Button>
    </StackLayout>
    <Scrollview height="80%">
        <StackLayout>
            <GridLayout *ngFor="let result of results" (tap)="onTap(result.tournament_id)" columns="*, *" rows="auto, auto, auto, auto, auto, auto" borderWidth="1px">
                <Label  [text]="result.name" row="0" col="0" colspan="2" ></Label>
                <Label  [text]="result.organization" row="1" col="0" colspan="2" ></Label>
                <Label  [text]="result.date" row="2" col="0" ></Label>
                <Label  [text]="result.time" row="2" col="1" ></Label>
                <Label  [text]="result.game" row="3" col="0" colspan="2" ></Label>
                <Label  [text]="result.style" row="4" col="0" colspan="2" ></Label>
                <Label  [text]="result.location" row="5" col="0" colspan="2" textWrap="true"></Label>
            </GridLayout>
        </StackLayout>
    </Scrollview>
</StackLayout>

点击其中一个锦标赛的描述应该会弹出一个锦标赛资料页面，如下所示：

现在我有一个 onTap 连接到这里的盒子：

  onTap(id){
    console.log("tapped", id);
    this.routerExtensions.navigate(["/tournaments","profile", id]).then(nav => {
              console.log(nav); // true if navigation is successful
              }, err => {
              console.log(err) // when there's an error
              });

  }

当我点击一个框时，它打印出来：

tapped {id} //first click
true
tapped {id} //subsequent clicks
null

如何在 nativescript 应用程序中创建类似 Angular 网络路由器链接的行为，点击一个对象会弹出另一个组件？

Answer 1

您应该按照 Angular Navigation 文档中的讨论使用 nsRouterLink。

Nativescript：如何创建 Angular 类似 routerlink 的行为

Nativescript: How to create Angular routerlink-like behavior

nativescript

angular2-nativescript