侧面菜单切换按钮未显示

Question

我的侧边按钮没有显示工作的说话，我不知道做错了什么。

以下是我所做的：

的src /页/家/ home.html做为

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle color="white" >
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <img src="assets/img/logo.png" width="40px" style="display:inline-block" height="40px"/>
    </ion-buttons>
  </ion-navbar>
</ion-header>

这里是 src / pages / home / home.scss ，如果有任何内部导致问题..

page-home {
  .toolbar-background {
    background: #d7130A;
    border-color: transparent;
  }

  .navbar-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  .row {
    margin-right: -15px;
    margin-left: -15px;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-md-6 {
    width: 50%;
  }

  @media (min-width: 1200px){
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
      float: left;
    }
  }

  @media (min-width: 992px){
    .col-md-6 {
      width: 50%;
    }
  }

  @media (min-width: 992px){
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
      float: left;
    }
  }
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .panel-primary {
    border-color: #337ab7;
  }

  .panel-green {
    border-color: #5cb85c;
  }

  .panel-yellow {
    border-color: #f0ad4e;
  }

  .panel-red {
    border-color: #d9534f;
  }

  .panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
  }

  .panel-primary>.panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
  }

  .panel-green > .panel-heading {
    border-color: #5cb85c;
    color: white;
    background-color: #5cb85c;
  }

  .panel-yellow > .panel-heading {
    border-color: #f0ad4e;
    color: white;
    background-color: #f0ad4e;
  }

  .panel-purple > .panel-heading {
    border-color: #551A8B;
    color: white;
    background-color: #551A8B;
  }

  .panel-red > .panel-heading {
      border-color: #d7130A;
      color: white;
      background-color: #d7130A;
    }

  .panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .col-xs-3 {
    width: 25%;
  }

  .col-xs-9 {
    width: 75%;
  }

  .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left;
  }

  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }


  .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a {
    color: #337ab7;
    text-decoration: none;
  }

  .fa-comments:before {
    content: "\f086";
  }

  .fa-tasks:before {
    content: "\f0ae";
  }

  .fa-support:before {
    content: "\f1cd";
  }

  .fa-wpexplorer:before {
    content: "\f2de";
  }

  .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left;
  }

  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .text-right {
    text-align: right;
  }

  .huge {
    font-size: 40px;
  }

  .panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .pull-left {
    float: left;
  }

  .pull-left {
    float: left!important;
  }

  .pull-right {
    float: right;
  }

  .pull-right {
    float: right!important;
  }

  a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
  }


  .btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
                       display: table;
                       content: " ";
                     }

  :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .btn-group-vertical>.btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .modal-header:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
                         clear: both;
                       }

  .btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
                         display: table;
                         content: " ";
                       }

  :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }



}

的src /页/选项卡/ tab.html

<ion-tabs [selectedIndex]="mySelectedIndex" name="conference">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

的src /页/选项卡/ tabs.ts

import { Component } from '@angular/core';

import { NavParams } from 'ionic-angular';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';


@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  mySelectedIndex: number;

  constructor(navParams: NavParams) {
    this.mySelectedIndex = navParams.data.tabIndex || 0;
  }
}

现在， src / app / app.html

<ion-split-pane when="(max-width: 768px)"> <!--Even when I remove this "when" event, I still don't have sidemenu button talkless of working.-->
  <!-- logged in menu -->
  <ion-menu id="loggedInMenu" [content]="content" >

    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="outer-content">

      <ion-list>
        <ion-list-header>
          Navigate
        </ion-list-header>
        <button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
          {{p.title}}
        </button>
      </ion-list>

      <ion-list>
        <ion-list-header>
          Account
        </ion-list-header>
        <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
          {{p.title}}
        </button>
      </ion-list>

      <ion-list>
        <ion-list-header>
          Tutorial
        </ion-list-header>
        <button ion-item menuClose (click)="openTutorial()">
          <ion-icon item-start name="hammer"></ion-icon>
          Show Tutorial
        </button>
      </ion-list>

    </ion-content>

  </ion-menu>

  <!-- main navigation -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>

</ion-split-pane>

我仍然无法弄清楚出错了什么。无论如何，我已经检查了我的逻辑，我已经做了一些事情，这使得它不会显示出无聊的工作，而我什么也没找到。我该如何解决这个问题？

**更新

在试图查看问题这么久之后，我想通了，当我将rootPage设置为HomePage / Dashboard时，sidemenu出现并运行良好，但是当我将rootPage设置为TabsPage时，它并没有显示sidemenu ，我必须将root设置为TabsPage。我在这里缺少什么？