使用Ionic2和Angular2 Typescript將側面菜單加載到DOM中

Question

我在從app.ts封裝側面菜單時遇到問題

app.html：

 <ion-menu [content]="content"></ion-menu>
 <ion-nav id="nav" [root]="rootPage" #content ></ion-nav>

應用程序

import {App, IonicApp,Page, Platform} from 'ionic-angular';
import {PageLogin} from './pages/login/login';


@App({
  templateUrl: 'build/app.html',
  config: {}
})

class MyApp {
  rootPage: any = PageLogin;

  constructor(private app: IonicApp, private platform: Platform) {
    this.initializeApp();
}

  initializeApp() {
    this.platform.ready().then(() => {

    });

  }
}

這將啟用一個側面菜單，我可以拖動它並與之交互，但仍然為空。 我可以將所有內容放到app.html中，並編寫要在app.ts中執行的任何代碼。

但是我想在/ pages文件夾中創建我的<ion-menu>並將此內容加載到<ion-menu> DOM中

sidemenu.html

<ion-toolbar>
        <ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
    <ion-list>
        ...
    </ion-list>
</ion-content>

輔助菜單

import {Page} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/sidemenu/sidemenu.html'
})

export class SideMenu{

  constructor() {}
}

如何將HTML的摘要加載到DOM文件中？ 還是有另一種方法可以將側面菜單代碼與app.ts分開？

提前致謝

Answer 1

無需自己編寫此代碼。 由於我看到您的app.ts文件缺少“ this.pages”部分，因此我假設您使用以下命令構建了項目

ionic start MyProject --v2

而是運行命令

ionic start MyProject tutorial --v2

教程項目具有內置的側面菜單。