Ionic 我无法使用选项卡表单重定向离子页面

jutyujz0  于 2023-02-01  发布在  Ionic
关注(0)|答案(4)|浏览(218)

我无法使用参数将离子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}}/" ...

浏览器显示:
服务器错误:9110未被抓住的(承诺中的):错误:无法匹配任何路由。URL段:'制表符/制表符2/1/'
当我使用:

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

浏览器中的url为http://localhost:8100/tabs/(tab3:tab2/2)
浏览器中的内容将消失,仅显示选项卡。

y0u0uwnf

y0u0uwnf1#

要在应用中导航,应使用routerLink指令,如下所示:

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

routerLink directive documentation
似乎还有一个问题。你们公布的路线是:tab2/:idtab2/:id。但是您路由到/tabs/tab2/1,而您应该路由到/tab2/1,如下所示:

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

h43kikqp2#

谢谢你的帮助,现在它工作正常。但是,现在控制器没有正确获得参数。
在此屏幕中,我将调用详细信息模块main module
但接收参数的模块无法获取发送的数据
这是没有参数时屏幕的外观
second module
当我添加完整的代码时(使用参数)
离子按钮大小=小路由器链接=/tab/tab2/{{f}}
错误错误:未被抓住的(承诺中的):错误:无法匹配任何路由。URL段:"制表符/tab2/3"错误:无法匹配任何路由。URL段:'制表符/制表符2/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的开发人员,但在Angular 和离子问题的新。

6jygbczu

6jygbczu3#

我可以解决它,只需添加以下代码

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

在选项卡-路由.模块.ts中

bfhwhh0e

bfhwhh0e4#

我解决了这个问题,把重定向对象上面的空路径.像这样的例子:

const routes: Routes = [
  {
    path: '',
    redirectTo: '/user/profile-u',
    pathMatch: 'full'
  },
  {
    path: '',
    component: UserPage,
    children: [
      {
        path: 'job-applying',
        loadChildren: () => import('./job-applying/job-applying.module').then(m => m.JobApplyingPageModule)
      }, ...

我希望这对您有所帮助。我意识到这似乎是一个微不足道的解决方案,但这个框架中的一些东西确实有点挑剔。

相关问题