ionic3之新建一个画面-yellowcong

ionic搞起来后，现在要搞事情啊，得搞一个新的画面试试。在ionic中，新画面的创建，有三步。1、在page目录下，创建自己界面的文件夹，并创建与文件夹同名的html和ts文件，2、在ts文件中，创建这个界面的类，并导入html模版，3、在app.module.ts中导入新的界面，并且配置declarations和entryComponents。

代码地址

https://gitee.com/yellowcong/ionic/tree/master/ionic3-newpage

使用方式

项目下载下来后，进入到需要启动的目录，然后先下载依赖，然后启动ionic服务
1、使用npm install下载依赖包

2、启动服务
下图可以看到，服务在8100端口

创建界面

ps:是在tab模版的基础上，进行的修改

1、在pages目录下创建页面

创建more文件夹，并在下面创建同名的 more.html以及more.ts文件，more.html就是界面文件，而more.ts文件就相当于后台处理文件了。

2、more.html

这个是界面代码，就一个简单的头和一个内容体

<ion-header>
    <ion-navbar>
      <ion-title>
        Test
      </ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>
    <h1>Hello World!</h1>
  </ion-content>

3、more.ts文件

在这个配置中，我们必须导入Component 这个组件，然后配置Component中的选择器以及模版的文件夹地址，这个地方有个小bug,在 templateUrl: 'more.html'添加注释，就会报错，找不到模板，我就被坑了

//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';

@Component({
    //为页面指定选择器的名称
    //在ionic 3.x中规范为 page- 开头，为了不造成混乱，需要保持每个页面selector的唯一性
    //可以直接通过templateUrl 来引用html,而不直接使用template
    //模板的字符串，里面其实就是html代码
    //template: `<h1>Hello World!</h1>`
    //可以直接通过templateUrl 来引用html,而不直接使用template
    selector: 'page-more',
    templateUrl: 'more.html'
  })
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class MorePage {

}

4、添加到app.module.ts配置

这个里面，需要导入这个app使用的界面，declarations 来声明界面，entryComponents是说明在脱机，也就是没网的情况下，必要的模板界面。

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

//导入自定义的界面,导入MorePage 这个类
import { MorePage } from '../pages/more/more'

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';


@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    //声明页面
    MorePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    //脱机模板编译器编译它们并为它们创建工厂，只编译在项目中使用到的组建
    MorePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

5、修改tabs.ts，设置自定义界面

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
//导入MorePage这个类
import { MorePage } from '../more/more';

@Component({
  templateUrl: 'tabs.html'
})

export class TabsPage {
  //第一个界面使用 MorePage了
  tab1Root = MorePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

debug启动

1、启动debug选项是Serve to the browser (ionic serve)

2、调试成功

常见问题

Error: No template specified for component MorePage

这个问题开始让我很无辜啊，我尼玛啥毛病也没有，后来发现是ionic的bug,在@Component里面，只能第一行有注释，下面的配置不能有注释，不然就会报错，我也是醉了

Error: No template specified for component MorePage
vendor.js:74995
    at syntaxError (http://localhost:8100/build/vendor.js:74995:34)
    at DirectiveNormalizer.normalizeTemplate (http://localhost:8100/build/vendor.js:77628:19)
    at CompileMetadataResolver.loadDirectiveMetadata (http://localhost:8100/build/vendor.js:89307:75)
    at http://localhost:8100/build/vendor.js:108078:72
    at Array.forEach (<anonymous>)
    at http://localhost:8100/build/vendor.js:108077:72
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:108074:75)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:108032:36)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:107948:37)

解决办法，就是不要添加注释了。