การนำทางระหว่างมุมมองไอออนบนไอออนิก

นี่เป็นคำถามที่น่าสนใจมากซึ่งฉันไม่พบคำตอบ

ฉันมีมุมมองที่แตกต่างกันเช่นการวาดด้านล่าง:

ฉันมีไฟล์ html แรกซึ่งมีสามมุมมอง ฉันใช้โค้ดด้านล่างนี้:

$stateProvider
    .state('home', {
  url: '/home',
  views: {
    day: {
      templateUrl: 'home.html',

    }
  }
})

 .state('help', {
  url: '/help',
  views: {
    day: {
      templateUrl: 'help.html'
    }
  }
})

 .state('contact', {
  url: '/contact',
  views: {
    day: {
      templateUrl: 'contact.html'
    }
  }
})

และในไฟล์ html คอนเทนเนอร์ : <ion-nav-view name="day"></ion-nav-view>

จากนั้นเป็นไฟล์ HTML ไฟล์ที่สองซึ่งมีเนื้อหาและมุมมองบางอย่างเช่น:

.state('c', {
  url: '/c',
  views: {
    view: {
      templateUrl: 'composition.html'
    }
  }
})

 .state('h', {
  url: '/h',
  views: {
    view: {
      templateUrl: 'resume.html'
    }
  }
})

และคอนเทนเนอร์ในไฟล์ html ที่สอง : <ion-nav-view name="view"></ion-nav-view>

เมื่อคลิกที่รายการใดๆ ของมุมมองใดๆ ของ html แรก ควรเปลี่ยนเส้นทางไปยังไฟล์ html ที่สองที่มีทั้งสองมุมมอง

ฉันควรใช้อะไรจริงๆ ??

ฉันพยายามทำสิ่งนี้:

สร้างไฟล์ racine html ซึ่งจะพิจารณาไฟล์ html สองไฟล์เป็น ion-views :

จากนั้นทำการเปลี่ยนแปลงกับผู้ให้บริการของรัฐดังนี้:

$stateProvider
    .state('index.home', {
  url: '/home',
  views: {
    day: {
      templateUrl: 'home.html',

    }
  }
})

 .state('index.help', {
  url: '/help',
  views: {
    day: {
      templateUrl: 'help.html'
    }
  }
})

 .state('index.contact', {
  url: '/contact',
  views: {
    day: {
      templateUrl: 'contact.html'
    }
  }
})

 .state('match.c', {
  url: '/c',
  views: {
    view: {
      templateUrl: 'composition.html'
    }
  }
})

 .state('match.h', {
  url: '/h',
  views: {
    view: {
      templateUrl: 'resume.html'
    }
  }
})

 .state('index', {
  url: '/index',
    abstract: true,
  views: {
    index: {
      templateUrl: 'first.html'
    }
  }
})

 .state('index.match', {
  url: '/match',

  views: {
    day: {
      templateUrl: 'second.html'
    }
  }
})

คุณคิดอย่างไรโปรด ??

ตัวอย่างพลุนเกอร์