莫代尔的Ionic 3选项卡

时间:2017-09-05 05:32:44

标签: ionic2 ionic3

我已经在模态上实现了标签。

以下是代码:

Pagewithmodal.ts

public class PendingDeliveryList extends Fragment {
    TextView delivery_List_Count;
    TextView delivered_List_Count;
    String companyName,userName;
    SwipeRefreshLayout mSwipeRefreshLayout;
    public PendingDeliveryList() {
        // Required empty public constructor
    }
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View v=inflater.inflate(R.layout.fragment_pending_delivery_list, container, false);
    delivery_List_Count=(TextView)v.findViewById(R.id.deliveryListCount);
    delivered_List_Count=(TextView)v.findViewById(R.id.deliveredListCount);
    mSwipeRefreshLayout = (SwipeRefreshLayout) v.findViewById(R.id.delivery_list_count_swipe);
    return v;}
@Override
public void onResume()
{
    super.onResume();
    userName=this.getArguments().getString("userId");
    companyName=this.getArguments().getString("companyName");
    String server_URL= PathUrls.pathUrl+"evs_getemployeedeliverycounts.php?db="+userName+"&userid="+companyName;
    //Toast.makeText(getActivity(), "userName"+userName+"companyName"+companyName, Toast.LENGTH_SHORT).show();
    //Create a volley request Object
    //sample[{}]
    JsonArrayRequest jsonArrayRequest=new JsonArrayRequest(server_URL, new Response.Listener<JSONArray>() {
        @Override
        public void onResponse(JSONArray response) {
            Toast.makeText(getActivity(), "test1", Toast.LENGTH_SHORT).show();
            Log.d("pending Delivery Count",response.toString());
            if (response!=null)
            {
                try{
                    delivery_List_Count.setText(response.getJSONObject(0).getString("deliverlist"));
                    delivered_List_Count.setText(response.getJSONObject(0).getString("deliveredlist"));

                }catch (JSONException e)
                {
                    e.printStackTrace();
                }
            }
        }
    }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {

        }
    });
    VolleySingleton.getsInstance().getRequestQueue().add(jsonArrayRequest);
    Log.d("delivery Count",server_URL);
}
}

TabspagePage.html

getFoodInfo(food) {
    let foodModal = this.modalCtrl.create('TabspagePage', { Model: food, Api: this.api, Title: 'Food Infopedia' });
    foodModal.onDidDismiss(option => {
      console.log(option);
    });
    foodModal.present();
  }

TabspagePage.ts

<ion-tabs>
  <ion-tab tabIcon="heart" [root]="tabNutri" tabTitle="Nutritional" [rootParams]="model"></ion-tab>
  <ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
</ion-tabs>

IngreinfoPage.html

this.tabIngre = 'IngreinfoPage';
    this.tabNutri = 'FoodinfoPage';
    this.model = { 'Api': navParams.data.Api, 'Model': navParams.data.Model };

IngreinfoPage.ts

<ion-header>
  <ion-navbar color="header">
    <ion-title>Food Infopedia</ion-title>
    <ion-buttons end>
      <button ion-button color="light" clear icon-only (click)="dismiss()">
        <ion-icon name='close' is-active="true"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

当我点击关闭按钮时,会调用dismiss()函数,并且我收到错误dismiss() { this.viewCtrl.dismiss(); }

1 个答案:

答案 0 :(得分:2)

<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>

这将创建一个新的导航堆栈,其根页为模态页面:IngreinfoPage。

当您从IngreinfoPage中解雇时,它将仅删除IngreinfoPage,并且堆栈将没有根页面。 如果要关闭标签模式,则必须从TabspagePage中删除,即在TabsPagePage中创建dismiss函数,并使用Events API在关闭时调用该函数。