使用 Ionic 和 Angular 2 Typescript 将侧边菜单加载到 DOM答案

【问题标题】：Loading a sidemenu into a DOM with Ionic2 and Angular2 Typescript使用 Ionic 和 Angular 2 Typescript 将侧边菜单加载到 DOM
【发布时间】：2023-04-04 00:10:01
【问题描述】：

我无法从 app.ts 封装侧边菜单

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 文件夹中创建我的侧边菜单并将此内容加载到<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 的 sn-p 加载到 DOM 文件中？还是有另一种方法可以将侧边菜单代码与 app.ts 分开？

提前致谢

【问题讨论】：

但是...来自MyApp 的模板是app.html，它有一个<ion-menu> 元素。但是您的MyApp 组件的选择器已经是ion-menu.. 无论如何，请在angular2 文档中搜索dynamicComponentLoader。不完全确定您要达到的目标，但也许这会对您有所帮助
我在评论中删除了选择器，我无意发布它。但是，是的，你是对的。我的 MyApp 模板是 app.html 并且有一个 ion-menu。如何将代码从 sidemenu 加载到 ion-menu 中？

标签： javascript dom typescript angular ionic2

【解决方案1】：

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

ionic start MyProject --v2

改为运行命令

ionic start MyProject tutorial --v2

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

【讨论】：