条件集 Angular/nativescript nsRouterLink

Question

是否可以仅在特定条件为真时设置

nsRouterLink

？

假设我有一个列表视图，每个项目都有自己的

nsRouterLink

到详细信息页面。但列表中的某些项目没有详细信息所需的 id，因此它们不应该是可单击的，而其他项目应该是可单击的。

我知道我可以使用

onClick

绑定并自行处理它，但这也可以通过

nsRouterLink

自动实现吗？

例如：

<StackLayout *ngFor="let item of items">
    <StackLayout [nsRouterLink]="['/path/' + item.id]">
        <!-- Content goes here -->
    </StackLayout>
</StackLayout>

Answer 1

我多次看到这个解决方案是什么：

<StackLayout *ngFor="let item of items">
    <StackLayout [nsRouterLink]="[item?.id ? '/path/' + item.id : false]">
        <!-- Content goes here -->
    </StackLayout>
</StackLayout>

Answer 2

添加

false

或

null

会产生如下错误：

ERROR 错误：NG04008：请求的路径在索引 0 处包含空段

和

错误错误：未捕获（承诺）：错误：NG04002：无法匹配任何路由。 URL 段：'home/false'

错误：NG04002：无法匹配任何路由。 URL 段：'home/false'` 真正有效且没有任何错误：

<StackLayout *ngFor="let item of items">
    <StackLayout [nsRouterLink]="item.id ? ['/path/' + item.id] : []">
        <!-- Content goes here -->
    </StackLayout>
</StackLayout>

Answer 3

我没怎么用过

nsRouterLink

。 但是，当您将链接留在

null

或

undefined

时会发生什么？

如果你真的处理

click

事件上的链接，那么应该在代码端（即组件）有条件地监听该事件。

另一种选择是显示 2 个不同的组件。

• 如果详细 → 显示

  nsRouterLink

• 如果没有详细信息→显示标签。

类似的东西也可以工作。

Answer 4

使用

isEnabled

属性，如果不允许用户转到下一页，这将禁用该按钮

<Button [isEnabled]="<value to check>" text="<Text>" [nsRouterLink]="['/<link>']"></Button>