angular - 空的离子路由器出口阻塞了离子含量
问题描述
我使用侧面菜单模板创建了一个项目。在侧面菜单中有两个方面(城市和天气)。第三页显示来自 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-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 路由到其他模块 - CityPageModule 用于 city.page - 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();
}
}
应用程序路由.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 {}
解决方案
你的问题在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},
]
},
];
这应该可以解决您的问题。
推荐阅读
- javascript - Next.js 重定向/验证
- java - Android Sudio,无法获得使用 api 和 listview 的程序
- javascript - 如何在不实际读取数据的情况下移动 FileHandle 的内部位置?
- python - Return 时缺少 1 个必需的位置参数
- prolog - 在 Prolog 中实例化参数
- python - beautifulsoup4 - 我如何解析特定的类名?
- awesome-wm - 在 awesomewm 工具提示中执行自定义命令
- reactjs - 使用 React 作为前端部署最佳实践的 ASP.NET MVC
- python - 为什么这个切片分配没有引发错误?
- apache-kafka - Kafka - 根据主题的前缀设置最小 ISR