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 Web routerlink，在该应用中单击对象会弹出另一个组件？

Answer 1

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