因为我们使用命令创建的项目是基于ionic2,我们首先要使用ionic3的新特性Lazy Loading就必须对我们的项目进行更改。下面就以修改home页为例。
第一步:
移除app.module.ts中declarations, entryComponents的 HomePage,并移除import { HomePage } from '../pages/home/home'
这一项;
第二步:
在home文件夹内新建文件home.module.ts,并在该文件中填入以下代码
import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { IonicPageModule } from 'ionic-angular';
@NgModule({
declarations: [HomePage],
imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }
第三步:
在home.ts文件中添加@IonicPage装饰器,并导入import { IonicPage } from 'ionic-angular';
如下格式:
...
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
//省略代码
}
...
第四步:
移除tabs.ts文件中的
import { HomePage } from '../pages/home/home'
这一项
第五步:
在构建过程中,将生成HomePage组件的深层链接,知道如何处理该字符串。
该字符串实际上是对'@ IonicPage'装饰器的name
属性的引用,它默认为类名作为字符串。
如果我们将该名称属性更改为其他内容,我们还需要更新我们在其他地方使用的引用。
所以我们需要修改home.ts文件中的
@IonicPage()为@IonicPage({name:'home'}),
并修改tabs.ts文件中
tab1Root = 'HomePage'为tab1Root = 'home';
网友评论