Я не могу перенаправить ионную страницу с помощью вкладок - PullRequest
1 голос
/ 27 октября 2019

Я не могу перенаправить ионную вкладку 4 на другую вкладку с помощью параметров.

Я использую tabs-routing.module.ts с этим кодом:

 {
    path: 'tab2/:id',
    outlet: 'tab3',
    children: [
      {
        path: '',
        loadChildren: () =>
          import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      }
    ]
  },
  /* {
    path: 'tab2/:id',
    outlet:'tab3',
    component: Tab2PageModule
  }, */

Представление содержит:

 ion-button size="small" href="/tabs/tab2/{{f}}/"...

или

 ion-button size="small" href="/tab2/{{f}}/" ...

. Браузер сообщает:

core.js: 9110 Ошибка: невыполненная (в обещании):Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'tabs / tab2 / 1 /'

Когда я использую:

ion-button size="small" href="/tabs/(tab3:tab2/{{ f }})" ...

URL-адрес в браузере: http://localhost:8100/tabs/(tab3:tab2/2)

Содержимое вбраузер исчезает и показывает только вкладки.

Ответы [ 3 ]

0 голосов
/ 28 октября 2019

Спасибо за помощь, теперь все работает правильно. Однако теперь контроллер не получает параметр правильно.

На этом экране я назову модуль подробностей основной модуль

Но модуль, который получает параметры, неполучить отправленные данные

Вот так выглядит экран без параметров

второй модуль

Когда я добавляю полный код (используя параметр)

Размер ионной кнопки = small routerLink = / tabs / tab2 / {{f}}

Ошибка: Uncaught (в обещании): Ошибка: Невозможно сопоставить ни один маршрут. Сегмент URL: «tabs / tab2 / 3» Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: 'tabs / tab2 / 3'

Содержимое файла tabs.routing.module.ts равно

{
        path: 'tab2/:id',
        outlet: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab2/:id',
        outlet: 'tab3',
        component: Tab2PageModule
      },

содержимое файла tabs2.page.ts равно

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ListadoPokemonService } from '../servicio/listado-pokemon.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit{
  idPokemon: string;
  nombrePokemon: string;
  listado:any;

  constructor(private activatedroute: ActivatedRoute, private servicio: ListadoPokemonService) { }

  ionViewVillEnter(){
    this.idPokemon = this.activatedroute.snapshot.paramMap.get('id');
    // this.nombrePokemon = this.activatedroute.snapshot.paramMap.get('nombre');

    this.servicio.getData('https://pokeapi.co/api/v2/pokemon/'+this.idPokemon+'/').subscribe(data=>{
      console.log(data);
      this.listado=data;
    });       
  }
  ngOnInit() {
  }

}

Заранее спасибо за вашу помощь, я разработчик php & visual studio, но новичок в угловых и ионных вопросах.

0 голосов
/ 29 октября 2019

Я мог бы решить эту проблему, просто добавьте следующий код

{ 
        path: 'tab2/:id', 
        //component: Tab2PageModule 
        loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },

в tabs-routing.module.ts

0 голосов
/ 28 октября 2019

Для навигации по вашему приложению вы должны использовать директиву routerLink, например:

<ion-button size="small" [routerLink]="['/tabs/tab2/', id]">

Документация к директиве routerLink

Кажется, есть другая проблема,Ваши объявленные маршруты: tab2/:id и tab2/:id. Тем не менее, вы направляетесь к /tabs/tab2/1, в то время как вы должны направлять к /tab2/1 Вот так:

<ion-button size="small" [routerLink]="['/tab2/', id]">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...