Question

我无法从app.ts封装sidemenu

app.html：

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

app.ts

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 文件夹中创建我的sidemenu并将此内容加载到<ion-menu> DOM

sidemenu.html

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

sidemenu.ts

import {Page} from 'ionic-angular';

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

export class SideMenu{

  constructor() {}
}

如何将HTML片段加载到DOM文件中？或者还有另一种方法可以从app.ts中分离出sidemenu代码吗？

提前致谢

Answer 1

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

ionic start MyProject --v2

而是运行命令

ionic start MyProject tutorial --v2

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

使用Ionic2和Angular2 Typescript将sidemenu加载到DOM中

1 个答案: