使用 Ionic2 和 Angular2 Typescript 将侧边菜单加载到 DOM 中

Loading a sidemenu into a DOM with Ionic2 and Angular2 Typescript

本文关键字：加载 菜单 DOM Ionic2 Angular2 Typescript 使用      更新时间：2023-09-26

我在从app.ts封装侧边菜单时遇到问题

应用.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(() => {
    });
  }
}

这将启用一个侧边菜单，我可以拖动并与之交互，但仍然为空。我可以将所有内容都放在应用程序中.html并编写要在app.ts中执行的任何代码。

但是我想在 /pages 文件夹中创建我的侧边菜单并将此内容加载到 <ion-menu> DOM 中

侧边菜单.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 分开？

提前致谢

无需自己编写此代码。 由于我看到您的app.ts文件缺少"this.pages"部分，因此我想您使用命令构建了项目

ionic start MyProject --v2

相反，请运行命令

ionic start MyProject tutorial --v2

教程项目内置了一个侧边菜单。

相关文章：