空的离子路由器出口阻塞了离子含量

Question

我使用侧面菜单模板创建了一个项目。 在侧面菜单中有两个方面（城市和天气）。 第三页显示来自 URL 的所选城市的天气）。 我有 3 条路线： /cites -> 城市页面 /weather -> weather-overview.page /weather/:id -> weather-detail.page

在两个天气页面上，我想显示一个包含所有选定城市的标签栏。

这个标签栏在一个自己的组件中（city-tab.component）：

<ion-tabs>
  <ion-tab-bar slot="bottom"> 
    <ion-tab-button *ngFor="let city of cityList" [routerLink]="['/weather', city.ID]">
      <ion-label>{{city.Name}}</ion-label>
      <img src="https://www.countryflags.io/{{city.Country}}/shiny/16.png">
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

我的问题是，如果我想在底部显示这个组件，我无法点击当前页面的内容/weather和/weather/:id。 chrome-inspector 检测到<ion-router-outlet _ngcontent-eyp-c2 tabs="true" class="hydrated"></ion-router-outlet> 这阻止了空穴离子含量。 上面的一些行是第二个<ion-router-outlet main...。 但内容正在显示。

这里是 weather-overview.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Weather</ion-title>
   </ion-toolbar>
</ion-header>
<ion-content>
  <ion-button (click)="handleclick()">Click</ion-button>
  <app-city-tabs></app-city-tabs>
</ion-content>

我还有 3 个模块： - 带有路由到其他模块的 AppModule - city.page 的 CityPageModule - 两个天气页面的 WeatherModule。

它们将通过延迟加载来加载。

我也尝试在 app.component 中集成<app-city-tabs>，但这没有帮助。

感谢您的帮助，不胜感激。

app.component.ts：

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  public appPages = [
    {
      title: 'Weather',
      url: '/weather',
      icon: 'sunny'
    },
    {
      title: 'Cities',
      url: '/cities',
      icon: 'business'
    }
  ];

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

city-tabs.component.ts

import { Component, OnInit } from '@angular/core';
import { CityLoaderService } from 'src/app/_sevices/city-loader.service';
import { City } from 'src/app/_models/city';
import { Router } from '@angular/router';

@Component({
  selector: 'app-city-tabs',
  templateUrl: './city-tabs.component.html',
  styleUrls: ['./city-tabs.component.scss'],
})
export class CityTabsComponent implements OnInit {

  cityList: City[];

  constructor(private cityLoader: CityLoaderService) {
   }

  ngOnInit() {
    this.cityList = this.cityLoader.getCities();
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'weather', pathMatch: 'full'},
  { path: 'cities', loadChildren: './cities/cities.module#CitiesPageModule' },
  { path: 'weather', loadChildren: './weather/weather.module#WeatherPageModule' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Answer 1

你的问题在city-tab.component.html这里：

<ion-tabs>
  <ion-tab-bar slot="bottom"> 
    <ion-tab-button 
*ngFor="let city of cityList" 
[routerLink]="['/weather', city.ID]"> // <----- issue here 
      <ion-label>{{city.Name}}</ion-label>
      <img src="https://www.countryflags.io/{{city.Country}}/shiny/16.png">
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

上面代码中显示的问题导致您出现问题。对于您单击的两个选项卡，您始终将您的路由器指向/weather/:id。将它们更改为两个单独的选项卡，而不是使用 *ngFor 创建两个选项卡。

我没有您的 city-tab-component.ts 和 app-routing.module.ts 文件可用，所以我不知道您是如何设置路线的，但我假设这可能是我所看到的问题。

在城市路线中设置子路线如下：

  const routes: Routes = [
          {
            path: '', component: CityTabsComponent, children: [
              {path: '', pathMatch: 'full', loadChildren: './cities/cities.module#CitiesPageModule'},
              {path: ':id', loadChildren: './cities/cities-detail.module#CitiesDetailPageModule},

            ]
          },
        ];

这应该可以解决您的问题。