Question

您好我正在尝试创建一个应用程序，当用户点击添加按钮打开另一个页面，列出该设备上所有已安装应用程序的列表然后通过单击一个应用程序将该应用程序添加到我的列表视图中的主页面应用程序然后用户可以返回主页面并单击该应用程序，然后从我的应用程序打开它。我正在使用ionic 3并使用AppAvilability插件列出所有已安装的应用程序这是我的主页代码：

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only solid>
        <ion-icon name="add-circle"></ion-icon>
         //add redirect to applist here
      </button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons end>
      <button ion-button icon-only solid>
        <ion-icon name="remove-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding id="page1">
  <div class="spacer" style="height:30;" id="page1-spacer6"></div>
  <ion-list id="page1-list1">
    <ion-item color="none" href-inappbrowser="http://www.google.com" id="page1-list-item5">
      <ion-avatar item-left>
        <img src="assets/img/FUhCAggEQECSHctkev1s_web.png" />
      </ion-avatar>
      <h2>
        Internet
      </h2>
    </ion-item>
  </ion-list>
  <div class="spacer" style="height:12;" id="page1-spacer1"></div>
  <ion-list id="page1-list2">
    <ion-item color="none" id="page1-list-item6">
      <ion-avatar item-left>
        <img src="assets/img/SWDHBJ2JRJyhl2rDAbPe_email.png" />
      </ion-avatar>
      <h2>
        Email
      </h2>
    </ion-item>
  </ion-list>
  <div class="spacer" style="height:12;" id="page1-spacer2"></div>
  <ion-list id="page1-list3">
    <ion-item color="none" on-click="goToMath()" id="page1-list-item7">
      <ion-avatar item-left>
        <img src="assets/img/eRWr6of9Sq2eRPvM4LjM_math.png" />
      </ion-avatar>
      <h2>
        Math
      </h2>
    </ion-item>
  </ion-list>
  <div class="spacer" style="height:12;" id="page1-spacer3"></div>
  <ion-list id="page1-list4">
    <ion-item color="none" on-click="goToScience()" id="page1-list-item8">
      <ion-avatar item-left>
        <img src="assets/img/Xtvlww5aS4SeDvBnE1FJ_sci.png" />
      </ion-avatar>
      <h2>
        Science
      </h2>
    </ion-item>
  </ion-list>
  <div class="spacer" style="height:12;" id="page1-spacer4"></div>
  <ion-list id="page1-list5">
    <ion-item color="none" on-click="goToHandwriting()" id="page1-list-item9">
      <ion-avatar item-left>
        <img src="assets/img/eeisx650TqaSAMPn9EH4_handwrittin.png" />
      </ion-avatar>
      <h2>
        Handwriting
      </h2>
    </ion-item>
  </ion-list>
  <div class="spacer" style="height:12;" id="page1-spacer5"></div>
  <ion-list id="page1-list6">
    <ion-item color="none" on-click="goToFlashcards()" id="page1-list-item10">
      <ion-avatar item-left>
        <img src="assets/img/noKqBQE1QbKdexCASz5g_flashcards.png" />
      </ion-avatar>
      <h2>
        Flashcards
      </h2>
    </ion-item>
  </ion-list>
  <div>
    <img src="assets/img/My3SIjXBSFoRJZG6yaWI_haQq7TIJRYeYrFNGbcvw_books.png" style="display:block;width:auto;height:auto;margin-left:auto;margin-right:auto;" />
  </div>
</ion-content>

我是离子的新手，所以关于如何做的任何链接/代码示例都会很棒！

提前致谢！

Answer 1

将所有应用程序存储在某种阵列中。例如，您可以创建一个对象数组，每个应用程序都具有某些属性（名称等）。使用* ngFor，您可以在视图中列出这些。

要根据条目将页面推送到导航，您需要导入NavController和NavParams。之后，使用ionic g page appPage从CLI创建页面然后，当用户单击按钮时，您可以注入NavController并调用.push（＆＃39; appPage＆＃39;）。您可以在此处将某些数据推送到Navparams（导航参数），以了解哪个页面被单击。你可以google＆＃34; Angular Tour of Heroes＆＃34;并按照＆＃34;详细信息视图＆＃34;他们在那里的指南，以便您可以将列表中的每个页面与某种名称相关联。

之后，只需为AppPage页面设计HTML和Typescript即可获得整洁的详细网页浏览。

如何在我的离子3应用程序中将安装的应用程序快捷方式添加到列表视图

1 个答案: