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/

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章