Question

我无法使用参数将ionic 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错误错误：未捕获（已承诺）：错误：无法匹配任何路由。网址段：“ tabs / tab2 / 1 /”

当我使用时：

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

浏览器中的网址是 http://localhost:8100/tabs/(tab3:tab2/2)

浏览器中的内容消失，仅显示选项卡。

Answer 1

要在应用中导航，您应使用l = ['i', 'b', 'c', 'a', '3', 'a', '7', 'a', '9', 'k', 'a', '66', 'k', 'd'] result = [{'plus_line':l[n+1]} for n, i in enumerate(l) if i == 'a'] print(result)指令，如下所示：

[{'plus_line': '3'},
 {'plus_line': '7'},
 {'plus_line': '9'},
 {'plus_line': '66'}]

the client documentation

似乎还有另一个问题。您声明的路由为：routerLink和<ion-button size="small" [routerLink]="['/tabs/tab2/', id]">。然而，您应该路由到tab2/:id，而您应该路由到tab2/:id 像这样：

/tabs/tab2/1

Answer 2

感谢您的帮助，现在它可以正常工作。但是，现在控制器无法正确获取参数。

在此屏幕中，我将调用详细信息模块 main module

但是接收参数的模块无法获取发送的数据

这是没有参数的屏幕外观

second module

当我添加完整的代码（使用参数）

ion-button size =小型routerLink = / tabs / tab2 / {{f}}

错误错误：未捕获（承诺）：错误：无法匹配任何路由。   URL段：'tabs / tab2 / 3'错误：无法匹配任何路由。网址   细分：“ 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开发人员，但是在角度和离子问题上还是新手。

Answer 3

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

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

在tabs-routing.module.ts

中

我无法使用制表符格式重定向离子页面

3 个答案: