使用Ionic 2在Plunker中创建Master / Detail应用程序

Building on from some good standard Ionic 2 plunkers here http://plnkr.co/edit/ZsoPeE?p=preview and http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview

建立在一些优秀的标准Ionic 2掠夺者的基础上http://plnkr.co/edit/ZsoPeE?p=preview和http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview

Can you help tweak my Master/Detail Plunker? I thought I had all the parts in place but missing something as it produces a white screen.

你能帮我调整我的Master / Detail Plunker吗？我以为我已经把所有的部件都放在了一边，但因为它产生了白色屏幕而丢失了一些东西

Here is my attempt at a Master/Detail plunk http://plnkr.co/edit/7NHIYMA3TUdd5nOkoXyF?p=preview

这是我对Master / Detail插件的尝试http://plnkr.co/edit/7NHIYMA3TUdd5nOkoXyF?p=preview

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';

import { AppComponent } from './app.component';
import { HomePage } from '../pages/home/home';
import { MasterPage } from '../pages/master/master';
import { DetailPage } from '../pages/detail/detail';

import { Sheetsu } from '../providers/sheetsu';

@NgModule({
  imports: [ IonicModule.forRoot(AppComponent) ],
  declarations: [ AppComponent, HomePage, MasterPage, DetailPage],
  entryComponents: [ HomePage, MasterPage, DetailPage ],
  bootstrap: [ IonicApp ],
  providers: [ Sheetsu ]
})
export class AppModule { }

1 个解决方案

#1

Fixed Plunker: http://plnkr.co/edit/5V36C9QHYDGBIqSIfBUl?p=preview

固定的Plunker：http：//plnkr.co/edit/5V36C9QHYDGBIqSIfBUl？p = preview

You had several mistakes

你有几个错误

1) import { Sheetsu } from '../providers/sheetsu'; <- your file is called Sheetsu, with a capital S

1）从'../providers/sheetsu'导入{Sheetsu}; < - 您的文件名为Sheetsu，资本为S.

2) Your relative paths are wrong, you've made it complicated for yourself by putting pages: 'pages', inside your config, and for example:

2）你的相对路径是错误的，你通过在你的配置中放置页面：'pages'来使它变得复杂，例如：

import { MasterPage } from '../pages/master/master';

从'../pages/master/master'导入{MasterPage};

inside HomePage should be

里面的HomePage应该是

import { MasterPage } from '../master/master';

从'../master/master'导入{MasterPage};

3) You are using "module": "commonjs", but not taking advantage of relative html urls:

3）您正在使用“模块”：“commonjs”，但没有利用相对的html网址：

templateUrl: 'pages/master/master.html', -> `templateUrl: './master.html',`

with moduleId: module.id inside your @Component

在@Component中使用moduleId：module.id

4) Your button click return this.http.get('../assets/sheetsu.json') should be return this.http.get('./assets/sheetsu.json')

4）你的按钮点击返回this.http.get（'../ assets / sheetsu.json'）应该返回this.http.get（'./ assets / sheetsu.json'）

#1