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 (将#修改为@）