Реализация подзавигации с использованием ION-NAV в IONIC 5 (угловой)

Автор оригинала: Ahmad Yar Khan.

Переход от более старой версии Ionic на IONIC 5, одна вещь, которую вы можете наткнуться, использует ION-NAV составная часть. Давайте погрузиться, чтобы увидеть, как правильно использовать ION-NAV для подзавигации, используя Ион-модал Отказ

Настройка шаблона: Просто начните, создавая компонент, в котором вы будете размещать вашу подзавигацию и добавить ION-NAV в шаблоне, как это

@Component({
  selector: "app-sub-navigation",
  template: "",
  styleUrls: []
})
class MySubNavigationComponent

Обратите внимание, что я использовал ссылочную переменную шаблона #mysubnav Что я буду использовать позже, чтобы ссылаться на это ION-NAV Отказ Теперь давайте доберемся до фактического кода, чтобы играть с ION-NAV и нажмите страницы/компоненты на навигационный стек.

1. Использование ViewShild.

import {ViewChild} from "@angular/core"
@Component({
  selector: "app-sub-navigation",
  template: "",
  styleUrls: []
})
class MySubNavigationComponent {
  
  @ViewChild('mySubNav', {static: true}) myNav: IonNav;
  
  constructor() {}
}

2. Обновите приложение. Module.ts.

import SubNavigationComponentModule from "./components/sub-navigation-component/sub-navigation-component.module.ts";
@ngModule({
  imports: [SubNavigationComponentModule]
})

3. Установите корневую страницу

import {ViewChild} from "@angular/core";
import Component1 from "./component1.component.ts";
@Component({
  selector: 'app-sub-navigation',
  template: '',
  styleUrls: []
})
class MySubNavigationComponent {
  
  @ViewChild("mySubNav", {static: true}) myNav: IonNav;
  private rootPage;
  private rootParams; 
  constructor() {
    this.rootPage = Component1;
    this.rootParams = {
     // any parameters to pass to the component
    }
  }
  ngOnInit() {
    this.myNav.setRoot(this.rootPage, this.rootParams);
  }

Уведомление МИНАВ Дает нам способ использовать методы, предоставляемые IONNAV.

Push Componts на Nav-Stage

import {ViewChild, OnInit} from "@angular/core";
import Component1 from "./component1/component1.component.ts";
import Component2 from "./component2/component2.component.ts";
@Component({
  selector: "app-sub-navigation",
  template: "",
  styleUrls: []
})
class MySubNavigationComponent implements OnInit {
  
  @ViewChild("mySubNav", {static: true}) myNav: IonNav;
  private rootPage;
  private rootParams;
  constructor() {
    this.rootPage = Component1;
    this.rootParams = {
     // any parameters to pass to the component
    }
  }
  ngOnInit() {
    this.myNav.setRoot(this.rootPage, this.rootParams);
  }

  private pushToNav() {
   this.myNav.push(Component2, {ninjaName: 'Alpha'});
  }
 private popFromNav() {
   this.myNav.pop()
 }
}

Доступ к парам нав `

import {NavParams} from "@ionic/angular";
@Component({
  selector: "app-component2",
  templateUrl: "./component2.component.html" ,
  styleUrls: []
})
class Component2 implements OnInit {
private ninjaName: string;
constructor(private navParams: NavParams) {}
ngOnInit() {
    this.ninjaName = this.navParams.get('ninjaName');
  }
}

Читайте ещё по теме: