通过函数获取错误进行路由 - Angular Bootstrap

Question

我正在尝试在按钮点击功能发生时转到另一个页面。我在控制台中收到以下错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'create-new-structure'
Error: Cannot match any routes. URL Segment: 'create-new-structure'
    at ApplyRedirects.noMatchError (router.js:4396)
    at CatchSubscriber.selector (router.js:4360)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

以下是我的app-routing-modules.ts

import { StructureListComponent } from './fee-management-system/fees-structure/manage-structure/structure-list/structure-list.component';
import { CreateStructureComponent } from './fee-management-system/fees-structure/manage-structure/create-structure/create-structure.component';

import { from } from 'rxjs';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },

  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'unauthorized-login',
    component: UnauthorizedLoginComponent
  },
  {
    path: 'portal',
    component: PortalComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },

      {
        path: 'students-information',
        component: StudentsInformationComponent,
        children: [
          {
            path: 'sis-tabs',
            component: SisTabsComponent,
          },
        ]
      },
      {
        path: 'fee-management-system',
        component: FeeManagementSystemComponent,
        children: [
          {
            path: '',
            component: FeesStructureComponent,
            children: [
              {
                path: 'tab-grade01',
                component: TabGrade01Component,
              },
              {
                path: 'tab-scrolls',
                component: TabScrollsComponent
              },
            ]
          },
          {
            path: 'Structure-List',
            component: StructureListComponent
          },
          {
            path: 'create-new-structure',
            component: CreateStructureComponent
          },
          {
            path: 'create-fees-structure',
            component: CreateFeesStructureComponent
          },
          {
            path: 'fees-invoicing',
            component: FeesInvoicingComponent
          },
          {
            path: 'ad-hoc-exam',
            component: AdHocExamComponent
          },
          {
            path: 'scholarships',
            component: ScholarshipsComponent
          },
          {
            path: 'create-scholarship',
            component: CreateScholarshipComponent
          },
          {
            path: 'collection-report',
            component: CollectionReportComponent
          },
          {
            path: 'concession-list',
            component: ConcessionListComponent
          }
        ]
      },
      {
        path: 'student-search-result',
        component: StudentSearchResultsComponent
      },
      {
        path: 'upload-data',
        component: UploadComponent
      },
    ],
  },
];

HTML

<div class="row form-group">
                        <div class="col-4"></div>
                        <div class="col-2">
                            <button class="btn btn-danger" data-dismiss="modal">Cancel</button>                           
                        </div>
                        <div class="col-2">
                            <!-- <a [routerLink] = "['../create-new-structure']" class="btn btn-success" data-dismiss="modal" >Continue</a> -->
                            <button (click) = "checkPro()" class="btn btn-success" data-dismiss="modal" >Continue</button>
                        </div>
                        <div class="col-4"></div>
                    </div>

components.ts

 checkPro() {
  checkproceed = AccYear + FeeTyp;

  if (checkproceed == 2) {
    console.log(checkproceed);
    this.router.navigate(['../create-new-structure']);

  }
  else {
    alert("Please select Academic Year & Fee Type");
    
  };

 }

我真正想要的是当点击下面的按钮时，用户需要重定向到 create-new-structure 组件。

<button (click) = "checkPro()" class="btn btn-success" data-dismiss="modal" >Continue</button>

Thank in advance

Answer 1

我不知道它是否能解决您的问题，但您可以尝试使用 ActivatedRoute 并导航至当前路线。

constructor (private route: ActivatedRoute, private router: Router) {}

checkPro() {
  checkproceed = AccYear + FeeTyp;

  if (checkproceed == 2) {
    console.log(checkproceed);
    this.router.navigate(['../create-new-structure'], { relativeTo: this.route });
    // Or this.router.navigate(['create-new-structure'], { relativeTo: this.route });
  }
  else {
    ...
  };
 }

文档在这里：https://angular.io/api/router/UrlCreationOptions#relativeTo

通过函数获取错误进行路由 - Angular Bootstrap

Routing by a function Get Errors - Angular Bootstrap

routes

function

angular