IonicPage() deeplink causing Cannot read property ' <property>' of undefined


I am trying to use ionicpage to create deep links in my app. Currently it works if I just launch ionic using localhost:8100. If I try to use the deeplink directly “http://localhost:8100/#/tab-page/recent/detail/48845”. I get Cannot read property ‘acf’ of undefined. acf being Advanced custom fields in json from the wordpress api.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiProvider } from '../../providers/api/api';
import {NgClass} from '@angular/common';

 * Generated class for the DetailPage page.
 * See for more info on
 * Ionic pages and navigation.
  segment: 'detail/:post_id',
  defaultHistory: ['HomePage'],
  priority: 'high'
  selector: 'page-detail',
  templateUrl: 'detail.html',
export class DetailPage {

  public post: any = [];
  public isLoading: boolean = false;
  public relatedItems: any = [];
  public youtube: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams,
              public api: ApiProvider) {
    //console.log(navParams.get('post')); = navParams.get('post');
    this.acf = navParams.get('acf');

  ionViewDidLoad() {

      this.isLoading = true;
      .subscribe((data:any) => {
      this.isLoading = false;  
      this.relatedItems = data;
    (error) => {
      this.isLoading = false;

  /*openDetail(item) {
    this.navCtrl.push('DetailPage', {post:item});

 openDetail(item, post_id) {
  this.navCtrl.push('DetailPage', { post: item, post_id: post_id});


The above code works if I just run it normally. I can load posts from homepage and see the “http://localhost:8100/#/tab-page/recent/home” url and if I select a post I can see “http://localhost:8100/#/tab-page/recent/detail/48845”. The problem is that if I try to use the “http://localhost:8100/#/tab-page/recent/detail/48845” url directly I get the cannot read property of undefined error.

Help with this will be appreciated