Angular 7.x.x Re-routing with routerLink only

Question

I was assigned to this work project with Angular. We have a few components that have a link to our terms&conditions page but said pages are heavily nested.

See below:

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 { }

My issue revolves around the paths, i need to use routerLink in order to re-route the browser, however said links are nested in:

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

What I've tried: Insert terms route and the corresponding component as a child into routes array, but it gives an error:

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]

I've watched and read a lot of tutorials, documentation about routing, but they are not approached like this. How could one manage to do this kind of "redirection" with routerLink only? redirecting with "click" function is forbidden!

Thank you in advance!

Okay I am an idiot! it turned out that the html was incorrect it was routerLink="terms-and-condition" i was missing a "/" However it's not redirecting to a certain fragment. But that's another question I need to handle. — Exitl0l, Feb 06 '19 at 10:16
Managed to fix the issue by myself. I missused the routerLink instead of "/route-to-nav-to" i've used "route-to-nav-to". And to get the right fragment i just needed to add fragment="fragment-name" to nav to a certain fragment. Question can be closed!! — Exitl0l, Feb 06 '19 at 10:30

score 0 · Answer 1 · answered Oct 28 '19 at 11:43

0

Managed to fix the issue by myself. I missused the routerLink instead of "/route-to-nav-to" i've used "route-to-nav-to". And to get the right fragment i just needed to add fragment="fragment-name" to nav to a certain fragment.

answered Oct 28 '19 at 11:43

Exitl0l

459
2
11
27

Angular 7.x.x Re-routing with routerLink only

1 Answers1