如何解决ionic app RangeError:超出最大调用堆栈大小
我正在学习有角度的离子技术,并且遇到了一些奇怪的问题。
加载我的应用程序时出现此错误
core.js:6241 ERROR RangeError: Maximum call stack size exceeded
at InnerSubscriber._error (InnerSubscriber.js:14)
at InnerSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MergeMapSubscriber.notifyError (OuterSubscriber.js:7)
at InnerSubscriber._error (InnerSubscriber.js:14)
at InnerSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MergeMapSubscriber.notifyError (OuterSubscriber.js:7)
这是我的主页,我只有一个离子标签
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="discover">
<ion-label>Discover</ion-label>
<ion-icon name="search"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="offers">
<ion-label>Offers</ion-label>
<ion-icon name="card"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
这是我的服务
import { Place } from './discover/place.model';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PlacesService {
private _places: Place[] = [
new Place(
'p1','A mansion','In the heart of','http://www.fassinoimmobiliare.com/new%20york/Foto%20appartamenti/New_York_loft_appartamento_appartamenti_villa_casa_case_vendita%20%2871%29.jpg',149.99),new Place(
'p2','L\'Amour Toujours','A romantic place','https://www.professionearchitetto.it/up/dzn/2015/09/parigi_01.jpg',189.99
),new Place(
'p3','The foggy palace','Not your average city trip','https://www.nyhabitat.com/picture-ln-apt/2021/2021D11.jpg',125.99
)
];
getPlaces() {
return [...this._places];
}
constructor() { }
}
这是我的应用路由
const routes: Routes = [
{
path:'',redirectTo: 'places',pathMatch: 'full'
},{
path: 'auth',loadChildren: () => import('./auth/auth.module').then( m => m.AuthPageModule)
},{
path: 'places',loadChildren: () => import('./places/place.module').then( m => m.PlacePageModule)
},{
path: 'bookings',loadChildren: () => import('./bookings/bookings.module').then( m => m.BookingsPageModule)
}
];
这是我开头显示的页面
HTML 顺便说一下,该按钮不起作用,我弹出了带有正确路径的弹出窗口,但是请求的页面没有打开
<ion-header>
<ion-toolbar>
<ion-title>Discover Places</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
<ion-card>
<ion-card-header>
<ion-card-title>
{{ loadedPlaces[0].title}}
</ion-card-title>
<ion-card-subtitle>
{{ loadedPlaces[0].price | currency}} / Night
</ion-card-subtitle>
</ion-card-header>
<ion-img [src]="loadedPlaces[0].imageUrl"></ion-img>
<ion-card-content>
<p>
{{ loadedPlaces[0].description }}
</p>
</ion-card-content>
<div class="ion-text-right">
<ion-button
fill="clear"
color="primary"
[routerLink]="['./',loadedPlaces[0].id]">
More
</ion-button>
</div>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
<ion-list>
<ion-item *ngFor="let place of loadedPlaces.slice(1)">
<ion-thumbnail slot="start">
<ion-img [src]="place.imageUrl"></ion-img>
</ion-thumbnail>
<ion-label>
<h2>
{{ place.title }}
</h2>
<p>
{{ place.description }}
</p>
</ion-label>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
TS
export class DiscoverPage implements OnInit {
loadedPlaces: Place[];
constructor(
private placesService: PlacesService
) { }
ngOnInit() {
this.loadedPlaces = this.placesService.getPlaces();
}
}
我在这里处理所有路由
const routes: Routes = [
{
path: 'tabs',component: PlacePage,children: [
{
path: 'discover',children: [
{
path: '',loadChildren: () => import('./discover/discover.module').then( m => m.DiscoverPageModule)
},{
path: ':placeId',loadChildren: () => import('./discover/place-detail/place-detail.module').then(m => m.PlaceDetailPageModule)
}
]
},{
path: 'offers',loadChildren: () => import('./offers/offers.module').then( m => m.OffersPageModule)
},{
path: 'new',loadChildren:
'./offers/new-offer/new-offer.module#NewOfferPageModule'
},{
path: 'edit/:placeId',loadChildren:
'./offers/edit-offer/edit-offer.module#EditOfferPageModule'
},loadChildren: './offers/offer-bookings/offer-bookings.module#OfferBookingsPageModule'
}
]
},{
path: '',redirectTo: '/places/tabs/discover',pathMatch: 'full'
}
]
},{
path: '',pathMatch: 'full'
}
];
为什么会出现此错误?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com(将#修改为@)