2016-03-17 1 views
0

Im возникли проблемы инкапсулирования sidemenu из app.tsЗагрузка sidemenu в DOM с Ionic2 и Angular2 машинопись

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.

Но я хочу создать 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-файл? Или есть другой способ, которым я могу отделить код sidemenu от app.ts?

Заранее спасибо

+0

Но ... ваш шаблон из 'MyApp' является' app.html', который имеет элемент ''. Но селектором вашего компонента «MyApp» уже является «ионное меню». В любом случае, выполните поиск в документации angular2 для 'dynamicComponentLoader'. Не совсем уверен, чего вы пытаетесь достичь, но, возможно, это поможет вам – PierreDuc

+0

Я удалил селектор в своем комментарии, я не собирался его публиковать. Но да, вы правы. Мой шаблон из MyApp - app.html и имеет ионное меню. Как я могу загрузить код из sidemenu в ионное меню? – mrmo1412

ответ

0

Там нет необходимости писать этот код самостоятельно. Поскольку я вижу, что ваш файл app.ts отсутствует раздел «this.pages», я полагаю, что вы построили свой проект с помощью команды

ionic start MyProject --v2 

Вместо этого запустите команду

ionic start MyProject tutorial --v2 

Учебник у проекта есть встроенное боковое меню.

Смежные вопросы