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

Question

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

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

这个标签栏在自己的组件中（城市-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-检查器检测到 <ion-router-outlet _ngcontent-eyp-c2 tabs="true" class="hydrated"></ion-router-outlet> 这是阻挡空穴离子含量。上面的一些行是第二个<ion-router-outlet main...。但是内容正在显示。

这是天气-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-city-tabs> 整合到 app.component 中，但这没有帮助。

谢谢你的帮助，我很感激。

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>

城市-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();
  }

}

应用-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},

            ]
          },
        ];

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

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

Empty ion-router-outlet blocks the ion-content

ionic-framework

angular

ionic4