Angular 7.xx Переадресация только с routerLink - PullRequest
Новая
       25

Angular 7.xx Переадресация только с routerLink

0 голосов
/ 06 февраля 2019

Я был назначен на этот рабочий проект с 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?перенаправление с помощью функции «щелкнуть» запрещено!

Заранее спасибо!

...