Question

我用侧面菜单模板创建了一个项目。在侧面菜单中有两个侧面（城市和天气）。第三页从URL显示所选城市的天气。我有3条路线： /cites-> Cities.Page /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检查器检测到<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-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>

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

            ]
          },
        ];

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

空的离子通道出口会阻塞离子含量

1 个答案: