Question

我和Angular一起被分配到了这个工作项目。我们有一些组件具有指向“条款和条件”页面的链接，但是所说的页面是大量嵌套的。

参见下文：

create-order.component.html：

    ...
<div class="form-group">
    <div class="custom-control custom-checkbox">
      <input class="custom-control-input"
        type="checkbox"
        name="termsAccept"
        id="termsAccept">
      <label class="form-check-label w-100 custom-control-label pr-5"
        for="termsAccept">
        I agree to the <a routerLink="terms-and-conditions">Terms and Conditions</a>
      </label>
    </div>
    <small class="text-info">Lorem ipsum do lor sit amet, consectetur adipiscing elit. </small>
  </div>
...

create-order.component.ts：

import { Component, OnInit } from '@angular/core';
import { PlatformCheckerTool } from '../../tools/platform-checker';

@Component({
  selector: 'app-create-order',
  templateUrl: './create-order.component.html',
  styleUrls: ['./create-order.component.scss']
})
export class CreateOrderComponent implements OnInit {

  start;
  end;
  constructor(private platformTool: PlatformCheckerTool) { }

  ngOnInit() {
    this.chekStoredOrderData();
  }

  chekStoredOrderData(): void {
    if (this.platformTool.isBrowserCall()) {
      const stored = sessionStorage.getItem('tmpOrderData');
      if (stored) {
        const storedData = JSON.parse(stored);
        if (storedData) {
          this.start = new Date(storedData['start']);
          this.end = new Date(storedData['end']);
        }
        sessionStorage.removeItem('tmpOrderData');
      }
    }
  }

}

order-routing.module.ts：

import { NgModule, Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { BasicLayout } from '../layouts';
import { OrderStepsLayoutComponent } from './layout/order-steps-layout.component';
import { CreatedOrderViewComponent } from './create/view/created-order-view.component';
import { CreateOrderLayoutComponent } from './create/layout/create-order-layout.component';
import { CreateOrderComponent } from './create/create-order.component';
import { AcceptOrderComponent } from './accept/accept-order.component';
import { RateFulfilledOrderComponent } from './rate-fulfilled/rate-fulfilled-order.component';

const routes: Routes = [
  {
    path: '', component: BasicLayout, children: [
      {
        path: '', component: CreateOrderLayoutComponent, children: [
          {
            path: 'clinic/:clinicId/services/:serviceId/order', component: CreateOrderComponent, pathMatch: 'full'
          },
          { path: 'order/:orderId', component: CreatedOrderViewComponent, pathMatch: 'full' },
        ]
      },
      {
        path: 'order/:orderId', component: OrderStepsLayoutComponent, children: [
          { path: 'accept', component: AcceptOrderComponent },
          { path: 'rate', component: RateFulfilledOrderComponent }
        ],
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

我的问题围绕路径展开，我需要使用routerLink才能重新路由浏览器，但是所说的链接嵌套在：

[hostname]/clinic/:clinicId/services/:serviceId/order[terms&conditions route comes here]
[hostname]/order/:orderId/accept/[terms&conditions route comes here]

我尝试过的方法：将条件route和相应的组件作为子项插入路由数组，但会出现错误：

Error: Cannot match any routes. URL Segment: 'clinic/5c4f47065900472038f02a2d/services/0004/order/terms-and-conditions'

Said path is not existing, where I should redirect is:
[hostname]/terms-and-conditions#[fragment-name]

我已经看过并阅读了很多有关路由的教程和文档，但是并没有像这样找到它们。仅使用routerLink怎么能做到这种“重定向”？禁止使用“点击”功能重定向！

提前谢谢！

Answer 1

由我自己解决此问题。我误用了routerLink而不是我使用的“ route-to-nav-to”。为了获得正确的片段，我只需要在片段中添加fragment =“ fragment-name”即可。

仅使用routerLink进行Angular 7.x.x重新路由

1 个答案: