来扯点ionic3[1] 建立一个新页面

时间 2019-11-09

标签 ionic3 ionic 建立一个页面繁體版

原文原文链接

建立一个页面组件

在 ionic 中，页面是以组件(component)的形式存在的，每一个页面都是一个独立的组件。咱们如今须要建一个名为test的页面，咱们如今pages文件夹下新建一个文件夹，并建立一以 .ts 结尾的同名文件。node

在 test.ts 中添加第一部分代码es6

import { Component } from '@angular/core'

@Component({
    selector: 'page-test',
    template: `<h1>Hello World!</h1>`
})
export class TestPage {}

在这几行代码中，咱们只作了一件事情，就是声明了TestPage页面类：npm

export关键词：将类暴露出去，以便其它的文件能够import到它。
类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。

简单了解装饰器

咱们发如今类的声明语句以前，有一串看似不明因此的代码。它就是Component装饰器，装饰器(decorator)在ES6中是以@开头的特殊的函数，能够动态地给类添加一些功能，在这里Component装饰器就会根据传入的配置对象，为页面类赋予建立页面视图的功能。数组

而这里Component并不是凭空出现的，而是文件的第一行，经过import语句将其导入进来的。浏览器

import { Component } from '@angular/core'

@angular/core是一个npm的模块，定义了angular的核心功能，你能够在node_modules目录下找到它。服务器

咱们在装饰器中配置了两个东西，selector和template：app

selector：为页面指定选择器的名称，能够在css为组件使用特定的样式，在ionic 3.x中规范为 page- 开头，为了避免形成混乱，须要保持每一个页面selector的惟一性。

<h1>Hello World!</h1>

template : 模板的字符串，里面其实就是html代码，它是最终展现在页面上的内容；这儿的字符串是用 ` 符号包裹的（就是esc下面那个），一来你能够自由地换行，二来不会有引号转义的问题，固然在ES6中它有更重要的做用（参见末尾资料中的“模板字符串”）

在AppModule中注册页面

APPModule位于 src/app 目录下的 app.module.ts中，APPModule是整个应用的根模块，它是一个大工厂，负责把全部咱们要用的东西组装在一块儿。咱们要把新添加的页面注册到根模块当中，这只须要简单的两步：
1.引入TestPage页面类，咱们在文件的开头部分，加上相关的语句，若是你是个对代码整洁度有要求的人，你确定是会加在已有的几个页面引入语句附近的：ionic

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

主意from后面的地址是不须要加 .ts 扩展名的，若是在编辑器或IDE中安装了自动填充路径的插件，很容易误加后缀。

2.将TestPage分别加入declarations和entryComponents数组中：

@NgModule({
  declarations: [
    ...
    TabsPage,
    TestPage
  ],
  ...
  entryComponents: [
    ...
    TabsPage,
    TestPage
  ],
 ...

以说明TestPage是APP中须要用到的组件，并且是一个动态组件。

展示

咱们尚不知道如何从已有的页面中把test页打开，咱们用一个笨办法来观察咱们刚刚建立的页面，打开 pages/tabs/tabs.ts ，导入TestPage，并把 tab1Root 替换掉，让应用的首屏变成test页面。

...
import { TestPage } from '../test/test';
...
export class TabsPage {

  tab1Root = TestPage;
  ...

运行serve命令，打开本地服务器，获得了这样的界面

使用独立的模板文件

咱们获得的显然不是一个典型的APP页面，如今咱们再test文件夹下新建test.html

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

这一段HTML代码就是一个标准的ionic页面结构，不少标签都是ionic定制的，页面分为头部(ion-header)和主体(ionic-content)两个部分，头部包含了导航栏(ion-navbar)及标题(ion-title)，而主体部分，就是咱们自定义的内容。

回到test.ts，把刚才装饰器嵌入的模板代码

template: `<h1>Hello World!</h1>`

替换为引入独立模板文件的代码

templateUrl:'./test.html'

注意这里包裹路径的符号变成了单引号。

在发生改动以后，浏览器会自动刷新页面，此时咱们看到了如今的页面：

总结

至此咱们完成了一个页面的建立，看似步骤有点多，可是熟练了之后这是一个很是快速的过程，总的说来一共就三步：

1.建立组件文件 .ts
2.在AppModule中注册组件
3.建立模板文件 .html

第二步和第三步其实是能够顺序互换的。

下一章将会介绍页面之间的跳转，以及页面栈原理。

参考资料

1.修饰器（ECMAScript6 入门）
2.模板字符串（ECMAScript6 入门）