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并且可以正常工作。