1

我被分配到 Angular 的这个工作项目。我们有一些组件具有指向我们的条款和条件页面的链接，但这些页面是严重嵌套的。

见下文：

创建-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>
...

创建-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');
      }
    }
  }

}

订单路由.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]

我试过的：将术语路由和相应的组件作为子组件插入到路由数组中，但它给出了一个错误：

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 怎么能做到这种“重定向”？禁止使用“点击”功能进行重定向！

先感谢您！

4

1 回答 1

0

设法自己解决了这个问题。我错过了使用 routerLink 而不是“/route-to-nav-to”，我使用了“route-to-nav-to”。为了获得正确的片段，我只需将片段 =“片段名称”添加到导航到某个片段。

于 2019-10-28T11:43:43.173 回答