Question

在我的应用程序中使用以下组件时，每当我点击链接时（例如，编辑银行帐户或创建新帐户），我都会收到以下错误。我不知道在哪里解决这个问题。我该怎么办？如何缩小错误范围？

错误columnNumber：31 fileName： “http://localhost:4300/polyfills.bundle.js第605行＆gt;评估” lineNumber：824 message：“Uncaught（in promise）：TypeError：guard is 不是功能\ nPreActivation.prototype.runCanDeactivate / canDeactivate $＆LT; @的WebPack内部：///../../../router/esm5/router.js：3962：49 \ nMergeMapSubscriber.prototype._tryNext@webpack-internal ：///../../../../rxjs/_esm5/operators/mergeMap.js：133：22 \ nMergeMapSubscriber.prototype._next@webpack-internal：///../../。 ./../rxjs/_esm5/operators/mergeMap.js:123:13\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber。 JS：96：13 \ nArrayObservable.prototype._subscribe@webpack-internal：///../../../../rxjs/_esm5/observable/ArrayObservable.js：121：17 \ nObservable.prototype._trySubscribe @的WebPack内部：///../../../../rxjs/_esm5/Observable.js：177：20 \ nObservable.prototype.subscribe@webpack-internal：///../ .. /../../rxjs/_esm5/Observable.js:165:60\nMergeMapOperator.prototype.call@webpack-internal:///../../../../rxjs/_esm5/operators/ mergeMap.js：97：16 \ nObservable.prototype.subscribe@webpack-internal：///../../../../rxjs/_esm5/Observable.js：162：13 \ nEveryOperat ...” [...]

或

columnNumber：31 fileName：“http://localhost:4300/polyfills.bundle.js <线605> eval“lineNumber：824 message：”Uncaught（in promise）： TypeError：outlet是空\ nPreActivation.prototype.setupRouteGuards@webpack-internal：///../../../router/esm5/router.js：3710：17个\ nPreActivation.prototype.setupChildRouteGuards /＆LT; @的WebPack内部：/ //../../../router/esm5/router.js:3659:13\nPreActivation.prototype.setupChildRouteGuards@webpack-internal:///../../../router/esm5/router的.js：3658：9 \ nPreActivation.prototype.setupRouteGuards@webpack-internal：///../../../router/esm5/router.js：3702：17个\ nPreActivation.prototype.setupChildRouteGuards /＆LT; @的WebPack内部：///../../../router/esm5/router.js：3659：13 \ nPreActivation.prototype.setupChildRouteGuards@webpack-internal：///../../../路由器/ esm5 / router.js：3658：9 \ nPreActivation.prototype.setupRouteGuards@webpack-internal：///../../../router/esm5/router.js：3706：17 \ nPreActivation.prototype。 setupChildRouteGuards /＆LT; @的WebPack内部：///../../../router/esm5/router.js：3659：13 \ nPreActivation.prototype.setupChildRouteGuards@webpack-internal：///../。 ./../router/esm5/router.js:3658:9\nPreActivation.prot...” [...]

bankaccounts.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';

import { Bankaccount } from '../../../../domain/bankaccount';
import { BankaccountService } from '../../../../services/bankaccount.service';

@Component({
  selector: 'ac-bankaccounts',
  templateUrl: './bankaccounts.component.html',
  styleUrls: ['./bankaccounts.component.css']
})
export class BankaccountsComponent implements OnInit {

  bankaccounts: Bankaccount[];
  bankaccountSelectedId: string | number;
  bankaccountDeletedId: string | number;

  constructor(private bankaccountService: BankaccountService,
    private router: Router,
    private route: ActivatedRoute,
    private location: Location) { }

  ngOnInit() {
    this.getBankaccounts();
  }

  selectBankaccount(bankaccountId: string | number) {
    console.log('id of bankaccount selected: ' + bankaccountId);
    this.bankaccountSelectedId = bankaccountId;
  }

  deleteBankaccount(bankaccountId: string | number) {
    console.log('id of bankaccount deleted: ' + bankaccountId);
    this.bankaccountDeletedId = bankaccountId
  }

  getBankaccounts(): void {
    this.bankaccountService.getBankaccounts().subscribe(bankaccounts => this.bankaccounts = bankaccounts);
  }

}

bankaccounts.component.html

<div>
  <div class="bankaccount-list">
    <ac-bankaccount-item *ngFor="let bankaccount of bankaccounts" [bankaccount]="bankaccount" (bankAccountDeleted)="deleteBankaccount($event)" (bankaccountSelected)="selectBankaccount($event)" [selected]="bankaccount.id == bankaccountSelectedId">
    </ac-bankaccount-item>
  </div>
  <br />
  <a routerLink='./bankaccounts/new' class="pull-right btn btn-success">
    new bankaccount
  </a>
</div>

的BankAccount-item.component.ts

import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Bankaccount } from '../../../../domain/bankaccount';

@Component({
  selector: 'ac-bankaccount-item',
  templateUrl: './bankaccount-item.component.html',
  styleUrls: ['./bankaccount-item.component.css'],
})
export class BankaccountItemComponent {

  @Input() selected: boolean;
  @Input() bankaccount: Bankaccount;

  @Output() bankaccountSelected = new EventEmitter();
  @Output() bankAccountDeleted = new EventEmitter();

  constructor(private router: Router) { }

  select() {
    console.log('emitting event bankaccountSelected with id ' + this.bankaccount.id);
    this.bankaccountSelected.emit(this.bankaccount.id);
  }

  delete() {
    console.log('emitting event bankAccountDeleted with id ' + this.bankaccount.id);
    this.bankAccountDeleted.emit(this.bankaccount.id);
  }

}

的BankAccount-item.component.html

<div class="fade-in bankaccount-list-entry" [ngClass]="{selected : selected}" (click)="select()">
  <div class="row">
    <div class="col-xs-11">
      <span>
        <a [routerLink]="['./bankaccounts/edit', bankaccount.id]"
           (click)="$event.stopPropagation();">{{bankaccount.name}}</a>
      </span>
      <br>
      <small>{{bankaccount.iban}}</small>
    </div>
    <div class="col-xs-1">
      <span (click)="delete(); $event.stopPropagation()"
            class="glyphicon glyphicon-trash trash"></span>
    </div>
  </div>
</div>

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { BalanceComponent } from './balance/balance.component';
import { UploadComponent } from './upload/upload.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './notFound.component';
import { configurationRoutes, configurationRoutingComponents } from './configuration/configuration.routing';

export const appRoutes: Routes = [
  { path: 'welcome', component: WelcomeComponent },
  { path: '', redirectTo: '/welcome', pathMatch: 'full' },
  { path: 'configuration', children: configurationRoutes },
  { path: 'upload', component: UploadComponent },
  { path: 'balance', component: BalanceComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent },

  {path: '**', redirectTo: ''},
];
export const appRouting = RouterModule.forRoot(appRoutes
  //  , { enableTracing: true }
);
export const routingComponents = [WelcomeComponent, UploadComponent, BalanceComponent, AboutComponent, PageNotFoundComponent,
  ...configurationRoutingComponents];

configuration.routing.ts

import { Routes } from '@angular/router';
import { ConfigurationOverviewComponent } from './components/configuration-overview/configuration-overview.component';
import { BankaccountsComponent } from './components/bankaccounts/bankaccounts/bankaccounts.component';
import { BankaccountEditComponent } from './components/bankaccounts/bankaccount-edit/bankaccount-edit.component';

export const configurationRoutes: Routes = [{
  path: '', component: ConfigurationOverviewComponent,
  children: [
    {
      path: '',
      component: ConfigurationOverviewComponent
    },
    {
      path: 'bankaccounts/edit/:id', component: BankaccountEditComponent,
      data: { title: 'Bankverbindung bearbeiten' },
      canDeactivate: [BankaccountEditComponent]
    },
    {
      path: 'bankaccounts/new', component: BankaccountEditComponent,
      data: { title: 'Neue Bankverbindung anlegen' },
      canDeactivate: [BankaccountEditComponent]
    }
  ]
}];

export const configurationRoutingComponents = [BankaccountsComponent, BankaccountEditComponent];

未捕获（承诺）：TypeError

0 个答案: