ListView 中的路由不起作用

Question

我在我的 ListView 中遇到路由问题。路由似乎不起作用或速度很慢。

这是“html”视图：

<ActionBar [title]="'TITLE' | translate" >
  <ActionItem [text]="'SETTINGS' | translate " (tap)="settings()"
    android.systemIcon="ic_menu_share_holo_dark"
    ios.systemIcon="9"
    ios.position="right">
  </ActionItem>
</ActionBar>
<GridLayout rows="auto, auto, *">

  <SearchBar [(ngModel)]="search" [hint]="'SEARCH' | translate" row="0"
    (submit)="searchSubmit()"
    (clear)="searchClear()"
    #searchFilter (keyup) = "0"
  ></SearchBar>

  <Button **(tap)="select(null)"** row="1" ></Button>

  <!--<ListView [items]="groceryList" row="1" class="small-spacing"> -->
  <ListView [items]="signalList | signalFilter:search " row="2" class="small-spacing" [class.visible]="listLoaded">
    <template let-item="item">
      <GridLayout rows="*"  columns="50px, *, auto"   >
          <Image col="0" [src]="item.image | signalImage " stretch="none"
              horizontalAlignment="center" verticalAlignement="center"
              ></Image>
          <StackLayout col="1" **(tap)="select(item)"** >
            <Label [text]="item.name" class="medium-spacing" class="list-title"></Label>
            <Label [text]="item.description | slice:0:150" class="list-description" textwrap="true" ></Label>
          </StackLayout>
          <Button col="2" text="See" **(tap)="select(item)"** ></Button>
        </GridLayout>
    </template>
  </ListView>

  <ActivityIndicator [busy]="isLoading"
        [visibility]="isLoading ? 'visible' : 'collapse'"
          row="1"
          horizontalAlignment="center" verticalAlignment="center">
  </ActivityIndicator>

我点击了不同的对象： - 在我的搜索栏下的按钮上（仅用于测试） - 在堆栈布局上， - 在我的堆栈布局右侧的按钮上。

代码如下：

select(signal : Signal) {
      console.dump(signal);
      // For the debug ...
      let id:string = "2";
      //if(signal != null) { id = signal.id; }
      this._router.navigate(["View", { id: id }]);
  }

当我点击第一个按钮时：一切都很顺利。如果我点击其他可能性：路由不起作用。我必须执行另一个活动，例如在搜索栏中绑定以使事情正常进行。

这是我的 package.json：

{
  // [...]
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/platform-server": "2.0.0-rc.4",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "nativescript-angular": "0.2.0",
    "nativescript-ng2-translate": "^1.1.0",
    "ng2-translate": "^2.2.2",
    "tns-core-modules": "^2.1.0"
  },
  "devDependencies": {
    "babel-traverse": "6.10.4",
    "babel-types": "6.11.1",
    "babylon": "6.8.4",
    "filewalker": "0.1.3",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
 }
}

Ps：我注意到我有两个 packages.json。一个在我的根项目文件夹中，另一个在我的应用程序项目文件夹中。它们似乎没有同步。这会是个麻烦吗？最后用的是哪一个？在这篇文章中，我将向您展示一个项目。

Answer 1

在我看来，您使用路由器的方式存在问题。在 NativeScript Angular2 项目中，您可以创建 RouterConfig 对象，它将路径映射到组件或使用 router-outlet，您可以查看 this 文章，其中描述了如何使用 Angular 在 NativeScript 应用程序中进行导航。关于问题，您还可以在this repo 中查看我的示例项目