使用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

教程项目具有内置的侧面菜单。