ionic4 IonicPage 简单的路由模板(官方称为深层链接系统—— deep link system)

创建三个文件

html、ts、module.ts

html:对应内容为要跳转的页面的内容

ts:将@IonicPage装饰器添加到组件
module.ts:在IonicPageModule.forChild导入页面模块时添加深层链接的页面


示例:
       html:adv_plugin.html
              

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div>
  <a href="javasrcipt:void(0);" onclick="top.location.href = '/#/adv-content';">
    <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg"/>
  </a>
</div>
</body>

</html>

ts:adv_plugin.ts

import {IonicPage} from "ionic-angular";
import {Component} from "@angular/core";

@IonicPage({     //设置路由名称例:localhost:8100/#/adv-plugin   跳转 (注意需要加"/#/")
  name: 'adv-plugin',
  segment: 'adv-plugin'
})

@Component({
  templateUrl: 'adv_plugin.html' //对应页面
})
export class AdvPlugin {

}

 

module.ts:adv_plugin.module.ts

import {AdvPlugin} from "./adv_plugin";
import {IonicPageModule} from "ionic-angular";
import {NgModule} from "@angular/core";

@NgModule({      //把下面三个AdvPlugin改成ts中的class
  declarations: [
    AdvPlugin   //对应ts中的名称
  ],
  imports: [
    IonicPageModule.forChild(AdvPlugin)
  ],
  entryComponents: [
    AdvPlugin
  ]
})
export class AdvPlugineModule {
}

三个文件写完。。就可以愉快的链接了

localhost:8100/#/adv-plugin    (注意需要加"/#/")

最后发一下官方教程:
https://ionicframework.com/docs/api/navigation/IonicPage/

 

 

 

 

 

 

 

发布了12 篇原创文章 · 获赞 6 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览