Leveraging multiple routes for a single component in Angular 6

Creating a component named Dashboard for admin requires passing the username in the route to find user information.

This is the routing setup:

{path:'dashboard/:username',component:DashboardComponent,children:[
{path:'role',component:RoleComponent},

When accessing the URL:

localhost:4200/panel/dashboard/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365d5f57765d5f571855595b">[email protected]</a>

The Dashborad Component includes a menu for users.

To visit the Role Component, the correct URL should be:

localhost:4200/panel/dashboard/role

But it seems to have trouble navigating to the Role Component. However, when using this route:

{path:'dashboard',component:DashboardComponent,children:[

it functions properly.

How can multiple routes be set up for the Dashboard component?

What could be causing the issue and how can it be resolved?

javascriptangulartypescriptangular6angular-routing

Answer №1

Below is an example of how you can set up the route:

{
   path:'dashboard/:username', component: DashboardComponent
},
{
   path:'dashboard/:username/role',component: RoleComponent
}

Answer №2

Based on your route definition, the correct path would be:

localhost:4200/panel/dashboard/{user}/role

Here is an example of how it should look:

localhost:4200/panel/dashboard/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84efede5c4efede5aae7ebe9">[email protected]</a>/role

If you want to add Role as a menu item in the account html, use this syntax:

[routerLink]="['/dashboard', user , '/role']

You can then use this code in any element, such as a link like this:

<a [routerLink]="['/dashboard', user, '/role/']> Role </a>

user represents the variable that stores the user identifier, like 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b10121a3b10121a55181416">[email protected]</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Testing Material-UI's autocomplete with React Testing Library: a step-by-step guide

I am currently using the material-ui autocomplete component and attempting to test it with react-testing-library. Component: /* eslint-disable no-use-before-define */ import TextField from '@material-ui/core/TextField'; import Autocomplete from ...

reactjstypescriptautocompletematerial-uireact-testing-library

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

I'm looking for suggestions on Twitter Bootstrap compatible jquery plugins that can create a Netflix-style continuously scrolling image carousel with mouse-over functionality. I've tried the carousel included in the Bootstrap JS library, but it r ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Encountering an unusual error while utilizing the Rails 3 form_for with the :remote option set to true

Encountering an error and seeking assistance: try { Element.update("status", "There seems to be an issue with this product."); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"status\", &bsol ...

javascriptruby-on-railsajaxruby-on-rails-3rjs

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

javascriptjqueryhtmlcss

Issues with the audio on ExpressJS video streaming can be quite vexing

After multiple attempts to run an ExpressJS web server that serves videos from my filesystem, I've encountered a frustrating issue. Whenever a video is played, there are constant popping sounds and eventually the audio cuts out completely after 3-10 m ...

javascriptnode.jsexpressaudiovideo

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

javascripthtml

What is the best approach for implementing recursion within a foreach loop in TypeScript?

Problem Situation I am attempting to develop a customized typewriting effect similar to the one demonstrated here with a 100ms delay using Angular. The TypeScript code I have written for this purpose is as follows: private arr: string[] = ["Lead Dev ...

angulartypescriptrecursion

Including the --aot flag in the Angular CLI can cause issues with the app

Recently, I encountered an issue with my Angular app while using dynamic forms. Everything was working fine until I added the --aot flag to my CLI command. Suddenly, I started receiving the error message "Property 'controls' does not exist on typ ...

angularangular2-formsaot

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

cssjsonangularpage-break

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4

What is the best way to determine the type of `rootReducer`?

My project is set up with a combination of React, Redux, Immutable.js, and TypeScript. As I worked on implementing it, I made an effort to declare types wherever possible which led me to discover an interesting issue. A code example illustrating the proble ...

reactjstypescriptimmutable.jsredux-immutable

JS/JQuery: Retrieve value from dropdown list or input field

I'm looking for a way for my user to choose a value from a drop-down menu, but if they can't find the right option there, I want them to be able to input a custom value. I've figured out a workaround by deactivating the drop-down and activa ...

javascriptjqueryangularjs

Using a combination of nested fetch() and array.map() does not allow for the return

My previous coding experience didn't present any issues with rendering HTML. Typically, I only needed to use one fetch() function. However, in this particular scenario, it appears that I require two fetch calls. The first fetch retrieves a product ID ...

javascriptnode.jsexpressmongoosefetch-api

avoiding less than or greater than symbols in JavaScript

I'm encountering an issue while attempting to escape certain code. Essentially, I need to escape "<" and ">" but have them display as "<" and "> in my #output div. At the moment, they show up as "&lt;" and "&gt;" on the page. This ...

javascriptjquerystringescaping

The main source for loading the 'XYZComponent' cannot be located

There's an issue I'm facing where ng2 code is being loaded into a .Net MVC component, but the console is showing the following error: EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'UsersComponent' Error: C ...

javascriptangularangular2-routing

What is the best way to integrate a Sequalize API into my React project?

I am looking for guidance on how to retrieve records from my MYSQL database and integrate it into my API. I am unsure about the routing process (do I need to create a component?) and struggling to find resources on using sequelize with React. Any assista ...

javascriptmysqlreactjsexpresssequelize.js

What is the name of the inherited class that invoked the function?

I am looking for a way to determine the name of the class of an object from within a function that called that function. My approach involves utilizing John Resig's class inheritance concept. For instance var CoreStuff = Class.extend({ log: function ...

javascriptoopobjectinheritance

Upon clicking, the reset function will be triggered

I have a jQuery code that includes a click event on td elements. After clicking on a td, an input field with text appears and the focus is set at the end of the text. However, I want to remove the focus after the initial click so that I can click in the ...

javascriptjquery

Utilizing NodeSize to Optimize the Spacing Among Nodes in the D3 Tree Arr

Currently, I am trying to adjust the positioning of my rectangle nodes because they are overlapping, as illustrated in the image below: In my research, I discovered that D3 provides a nodeSize and separation method. However, I encountered difficulties imp ...

javascripttreed3.js

Utilizing type guards in prop functions for conditional rendering within React TypeScript adds an extra layer

In my code, I am conditionally rendering a Button. However, I encountered an issue on line 7 where TypeScript is indicating that the first parameter of the exportExcel function may be null even though it should not be, considering the conditional render lo ...

reactjstypescript