Ionic 3 - 深層鏈接 - 網址未出現

Question

嘗試使用@Page裝飾器使用新的深層鏈接系統。

我想我已經正確設置了所有設置（控制檯中沒有顯示錯誤），但URL沒有出現。這裏是我的代碼

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePageModule } from '../pages/home/home.module'; 
import { JobsPageModule } from '../pages/jobs/jobs.module'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 

@NgModule({ 
    declarations: [ 
    MyApp 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    HomePageModule, 
    JobsPageModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp 
    ], 
    providers: [ 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    SplashScreen, 
    StatusBar 
    ] 
}) 
export class AppModule {} 

home.component.ts

import { Component } from '@angular/core'; 
import { NavController, IonicPage } from 'ionic-angular'; 

@IonicPage({ 
    name: 'home', 
    segment: 'home' 
}) 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController) { 

    } 


} 

home.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage } from './home'; 

@NgModule({ 
    declarations: [ 
    HomePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    ], 
    exports: [ 
    HomePage 
    ] 
}) 
export class HomePageModule {} 

的package.json

{ 
    "name": "ionic-hello-world", 
    "author": "Ionic Framework", 
    "version": "1.0.0", 
    "homepage": "http://ionicframework.com/", 
    "private": true, 
    "scripts": { 
    "clean": "ionic-app-scripts clean", 
    "build": "ionic-app-scripts build", 
    "ionic:build": "ionic-app-scripts build", 
    "ionic:serve": "ionic-app-scripts serve" 
    }, 
    "dependencies": { 
    "@angular/common": "4.0.0", 
    "@angular/compiler": "4.0.0", 
    "@angular/compiler-cli": "4.0.0", 
    "@angular/core": "4.0.0", 
    "@angular/forms": "4.0.0", 
    "@angular/http": "4.0.0", 
    "@angular/platform-browser": "4.0.0", 
    "@angular/platform-browser-dynamic": "4.0.0", 
    "@ionic-native/core": "3.4.2", 
    "@ionic-native/splash-screen": "3.4.2", 
    "@ionic-native/status-bar": "3.4.2", 
    "@ionic/storage": "2.0.1", 
    "cors": "^2.8.3", 
    "ionic-angular": "3.0.1", 
    "ionicons": "3.0.0", 
    "rxjs": "5.1.1", 
    "sw-toolbox": "3.4.0", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "1.3.0", 
    "@ionic/cli-plugin-cordova": "0.0.12", 
    "@ionic/cli-plugin-ionic-angular": "0.0.6", 
    "typescript": "~2.2.1" 
    }, 
    "cordovaPlugins": [ 
    "cordova-plugin-whitelist", 
    "cordova-plugin-console", 
    "cordova-plugin-statusbar", 
    "cordova-plugin-device", 
    "cordova-plugin-splashscreen", 
    "ionic-plugin-keyboard" 
    ], 
    "cordovaPlatforms": [ 
    "ios", 
    { 
     "platform": "ios", 
     "version": "", 
     "locator": "ios" 
    } 
    ], 
    "description": "someProject: An Ionic project" 
} 

任何建議將是偉大的。

UPDATE：

發現這個鏈接

https://github.com/fundo90/ionic2-starter-mobile/tree/b53023d99e78e7b2b56ff4345555656b2de743b7/src

這似乎已的URL。但不確定到他是如何在你的home.module.ts和jobs.module.ts導入模塊

Answer 1

import { HomePageModule } from '../pages/home/home.module'; 
import { JobsPageModule } from '../pages/jobs/jobs.module'; 

你並不需要導入這兩個頁面，因爲已經定義的進口。看看是否刪除這些將有所幫助。

Answer 2

好doke所以想通了，從下面的教程

http://masteringionic2.com/blog/2017-04-14-lazy-loading-and-deep-linking-with-ionic-3/

所以，在app.component.ts需要刪除以下導入

import { HomePage } from '../pages/home/home'; 

，然後設置根時頁面，我們使用我們使用離子頁面修飾器創建的名稱，即

@IonicPage({ 
    name: 'home', 
    segment: 'home' 
}) 

所以app.component看起來像這樣

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


    @Component({ 
     templateUrl: 'app.html' 
    }) 
    export class MyApp { 
     rootPage:any = 'home'; 

     constructor(
     platform: Platform, 
     private splashScreen: SplashScreen, 
     private statusBar: StatusBar 
     ) { 
     platform.ready().then(() => { 
      // Okay, so the platform is ready and our plugins are available. 
      // Here you can do any higher level native things you might need. 
      this.statusBar.styleDefault(); 
      this.splashScreen.hide(); 
     }); 
     } 
    } 

而且我們也不需要導入模塊，我在我的問題已經做了以上。所以app.moudule.ts看起來像這樣

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 

@NgModule({ 
    declarations: [ 
    MyApp 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp 
    ], 
    providers: [ 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    SplashScreen, 
    StatusBar 
    ] 
}) 
export class AppModule {} 

希望幫助別人！

Answer 3

在我的情況下，我在我的頁面有菜單，這是導致問題。我只是將菜單移至app.html並且可以正常工作。